BAB 2 LANDASAN TEORI

Transkripsi

1 10 BAB 2 LANDASAN TEORI 2.9 Pengertian Sistem Informasi Sistem informasi merupakan suatu sistem yang menerima masukan data dan instruksi, mengolah data tersebut sesuai dengan instruksi dan mengeluarkan hasilnya. Gordon B. Davis (1991: 91). Sistem informasi merupakan sarana alternatif untuk membantu memberikan informasi bagi suatu lembaga/perusahaan ataupun perorangan. Salah satunya adalah website, merupakan sarana promosi yang memberikan kemudahan bagi siapa saja yang ingin mengaksesnya kapanpun dan dimanapun PHP (Personal Home Page) PHP adalah singkatan dari Personal Home Page yang merupakan bahasa standar yang digunakan dalam dunia website. PHP adalah bahasa pemrograman yang berbentuk script yang diletakkan didalam web server. Ada beberapa pengertian tentang PHP, akan tetapi PHP dapat diartikan sebagai Hypertext Preeprocessor. Ini merupakan bahasa yang hanya dapat berjalan pada server yang hasilnya dapat ditampilkan pada klien. Interpreter PHP dalam mengeksekusi kode PHP pada sisi

2 11 server disebut serverside, berbeda dengan mesin maya Java yang mengeksekusi program pada sisi klien (client-server), Kasiman Peranginangin, (2009) Sejarah PHP PHP pertama kali diciptakan oleh Rasmus Lerdorf pada tahun Awalnya, PHP digunakan untuk mencatat jumlah serta untuk mengetahui siapa saja pengunjung pada homepage-nya. Rasmus lerdorf adalah seorang pendukung open source. Oleh karena itu, ia mengeluarkan Personal Home Page Tools versi 1.0 secara gratis, kemudian menambah kemampuan PHP 1.0 dan meluncurkan PHP 2.0. Pada tahun 1996, PHP telah banyak digunakan dalam website didunia. Sebuah kelompok pengembang software yang terdiri dari rasmus, zeew zuraski, andi gutman, stig bakken, shane caraveo dan jim winstead bekerjasama untuk menyempurnakan PHP 2.0. Akhirnya, pada tahun 1998, PHP 3.0 diluncurkan. Penyempurnaan terus dilakukan sehingga pada tahun 2000 diluncurkan PHP 4.0. Tidak berhenti sampai disitu, kemampuan PHP terus ditambah dan versi terbaru yang dikeluarkan adalah PHP 5.0.x. Kasiman Peranginangin, Konsep dasar PHP Kode PHP diawali dengan tanda lebih kecil (<) dan diakhiri dengan tanda lebih besar (>). Ada beberapa cara untuk menuliskan skrip PHP yaitu:

3 12 1. <?..skrip PHP?> 2. <?php..skrip PHP?> 3. <script language= PHP >..skrip PHP </script> 4. <%..skrip PHP %> Pemisah antar instruksi adalah tanda titik koma (;) dan untuk membuat atau menambahkan komentar/standar penulisan adalah: /* komentar */, // komentar, # komentar. Untuk menuliskan skrip PHP ada dua cara yang sering digunakan yaitu Embedded Script dan Non-Embedded Script. a. Embedded Script adalah script PHP yang disisipkan diantara tag dokumen HTML. Contoh penulisan dari Embedded Script: <html>

4 13 <head><title>embedded Script</title></head> <body> <?pho echo Hallo, selamat menggunakan PHP ;?> </body> </html> b. Non-Embedded Script adalah skrip PHP murni, tag html yang digunakan untuk membuat dokumen merupakan bagian dari skrip PHP. Contoh penulisan dari Non-Embedded Script : <?php echo <html> ; echo <head> ; echo <title>mengenal PHP</title> ; echo </head> ; echo <body> ; echo <p>php itu mudah</p> ; echo </body> ; echo <html> ;?> Script yang dibuat dengan PHP disimpan dengan nama file dan diikuti dengan ekstensi *.php. Bila skrip PHP diakses melalui komputer local maka file

5 14 PHP disimpan di folder htdocs di web server. Sama halnya dengan penaman dokumen HTML, pemberian nama dokumen yang sama tetapi dituliskan dengan case yang berbeda akan dianggap sebagai dokumen yang berbeda. Skrip dapat disisipkan di bagian manapun dalam dokumen html, begitu pula sebaiknya skrip HTML dapat diletakkan di antara skrip PHP, Kasiman Peranginangin, Operator PHP Seperti pada bahasa pemrograman lainnya, pada PHP operator digunakan untuk memanipulasi atau melakukan proses perhitungan pada suatu nilai. Pada PHP terdapat beberapa jenis operator yaitu, operator aritmatik, operator perbandingan, dan operator gabungan dari aritmatik dan perbandingan. 1. Operator Aritmatik Operator aritmatik di sini digunakan untuk perthitungan aritmatik seperti penjumlahan, pengurangan, perkalian, pembagian, dan juga modulus. Berikut adalah tabel operator aritmatik : Tabel 2.1 Tabel Operator Aritmatika Operator Contoh Makna Penjuamlahan Pengurangan * 3*4 Perkalian

6 15 / 9/3 Pembagian % 10%3 Modulus 2. Operator Perbandingan Operator perbandingan digunakan untuk membandingkan/menguji hubungan antara beberapa nilai dan juga variabel yang selalu menghasilkan nilai TRUE atau FALSE. Berikut adalah tabel operator perbandingan dengan contoh perbandingan antara 2 variabel (misal $a=3, $b=4) : Tabel 2.2 Operator Perbandingan Operator Contoh Makna Hasil == $a==$b Sama dengan False!= $a!=$b Tidak sama dengan True < $a<$b Lebih kecil dari True > $a>$b Lebih besar dari False <= $a<=$b >= $a>=$b Lebih kecil atau sama dengan dari Lebih besar atau sama dengan dari True False

7 16 3. Operator gabungan dari aritmatika dan perbandingan Operator gabungan dari aritmatik dan assignment di sini merupakan gabungan dari operator aritmatik dan assignment yang menghasilkan satu perintah singkat. Tabel 2.3 Tabel Operator Gabungan dari Aritmarika dan Perbandingan Operator Contoh Operasi yang ekuivalen += $jumlah += 2 $jumlah = $jumlah+2 -= $jumlah -= 2 $jumlah = $jumlah-2 *= $jumlah *= 2 $jumlah = $jumlah*2 /= $jumlah /= 2 $jumlah = $jumlah/2 %= $jumlah %= 2 $jumlah = $jumlah%2.= $string.= oke $string = $string. oke 2.11 MySQL MySQL merupakan software sistem manajemen database (Database Management System DBMS) yang sangat popular di kalangan pemrogram web, terutama di lingkungan linux dengan menggunakan skript dan ped. Fungsi MySQL dapat dikatakan sebagai interpreter query, karena setiap kita menggunakan query SQL (perintah SQL) kita harus meletakkannya di dalam

8 17 fungsi ini. Dengan kata lain, SQL tidak dapat dijadikan tanpa adanya fungsi MySQL. MySQL termasuk jenis relational database management system (RDBMS). Sehingga istilah seperti tabel, baris dan kolom tetap digunakan dalam MySQL. Pada MySQL, sebuah database mengandung beberapa tabel, tabel terdiri dari sejumlah baris dan kolom. SQL merupakan kependekan structured query language. SQL digunakan untuk berkomunikasi dengan sebuah database. SQL adalah bahasa yang meliputi perintah-perintah untuk menyimpan, menerima, memelihara, dan mengatur aksesakses ke basis data serta digunakan untuk memanipulasi dan menampilkan data dari database (R.W. Rosari, 2008) Fungsi PHP dan MySQL Fungsi PHP untuk mengakses MySQL yang biasa digunakan diantaranya adalah : a. mysql_connect(), fungsi mysql_connect adalah untuk menghubungkan PHP dengan database MySQL. Format fungsinya adalah : mysql_connect(string hostname, string username, string password); b. mysql_select_db, setelah terhubung ke database MySQL dengan menggunakan mysql_connect, langkah selanjutnya adalah memilihi database yang akan digunakan. Fungsi mysql_connect_db digunakan untuk memilih database. Format fungsinya adalah: mysql_select_db(string database, koneksi);

9 18 c. mysql_query, dalam database MySQL, perintah untuk melakukan trnasaksi ialah perintah SQL. Sebutan untuk mengirim perintah SQL dinamakan query. Query memberi perintah kepada database untuk melakukan apa yang dikehendaki. Format fungsinya adalah: int mysql_query(string query, int[link_identifier]); d. mysql_num_rows, kegunaan dari fungsi ini adalah untuk menghitung jumlah baris yang dikenai oleh proses SQL. Format penulisannya adalah: int mysql_num_rows(int result); e. mysql_fetch-array, fungsi ini digunakan untuk menampilkan data. Dalam fungsi ini, hasil query ditampung dalam bentuk array. Format fungsinya adalah: Array mysql_fetch_array(int result, int [result_type]); (Kasiman Peranginangin, 2009) Hypertext Markup Language (HTML) Hypertext Markup Language merupakan kepanjangan dari kata HTML. HTML adalah script dimana kita bisa menampilkan informasi dan daya kreasi kita lewat intenet. HTML juga merupakan file teks murni yang dapat dibuat dengan editor teks sembarang yaitu yang dikenal sebagai web page atau dokumen yang disajikan dalam web browser. Dokumen ini umumnya berisi informasi atau interface aplikasi didalam internet.

10 19 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, macintosh. Kata Markup Language pada HTML menunjukkan fasilitas yang berupa tanda tertentu dalam script HTML sehingga kita bisa mengatur judul, garis, tabel, gambar dan lain-lain dengan perintah yang telah ditentukan dalam elemen HTML. Simbol penandaan yang digunakan dalam HTML ditandai dengan tanda lebih kecil (<) dan tanda lebih besar (>) yang disebut dengan tag. Misalnya hendak menampilkan teks yang tercetak miring, maka mark up yang digunakan adalah sebagai berikut : <i> Teks ini akan dicetak miring </i> (MADCOMS, 2008) HTML itu sendiri terdiri dari beberapa bagian yang fungsinya sebagai penanda suatu kelompok perintah tertentu, misalnya kelompok perintah form yang ditandai dengan kode <form>, judul dengan <title> dan sebagainya. Untuk lebih lanjut mengenai bagian-bagian HTML perhatikan skema dibawah ini : <html> <head> <title> Judul Halaman </title> </head> <body> isi dari halaman web

11 20 </body> </html> Keterangan : 1. Dokumen HTML selalu diawali dengan tand tag pembuka <html> dan diakhiri dengan tanda tag penutup </html>. 2. Pada elemen head <head></head>, dapat kita sisipkan kode untuk menuliskan keterangan tentang dokumen HTML. Atau dapat juga kita sisipkan scripts pemrograman web seperti Javascript, VBscript atau CSS untuk menambah daya tarik pada situs yang kita buat agar lebih menarik dan dinamis. 3. Elemen-elemen <body></body> berisi tag-tag untuk isi atau layout tampilan situs kita, seperti : <font></font>, <table></table>, <form></form>. Jadi jelas bahwa elemen adalah suatu bagian yang besar yang terdiri dari kodekode tag tersebut. Sedangkan tag hanyalah merupakan bagian dari elemen. Tag adalah kode-kode yang digunakan untuk mengatur dokumen HTML. Secara garis besar bentuk umum tag adalah sebagai berikut : <tag-awal>teks<tagakhir>. Namun ada juga tag yang tidak perlu ada tag penutup seperti <br>, <hr>, <img> dan lain-lain. (MADCOMS, 2008) CSS (Cascading Style Sheet) CSS merupakan kependekan Cascading Style Sheet yang berfungsi untuk mengatur tampilan dengan kemampuan jauh lebih baik dari tag maupun atribut

12 21 standar HTML. CSS sebenarnya adalah suatu kumpulan atribut untuk fungsi format tampilan dan dapat digunakan untuk mengontrol tampilan banyak dokumen secara bersamaan. Keuntungan menggunakan CSS yaitu jika ingin mengubah dokumen, maka tidak perlu mengubah satu persatu. Penggunaan CSS ada dua cara yaitu dengan menyispkan kode CSS langsung dalam kode HTML atau simpan menjadi file tersendiri berekstensi *.css. Dengan meyimpan sebagai file tersendiri akan memudahkan untuk mengontrol tampilan dalam banyak dokumen secara langsung. CSS mendapat dukungan penuh pada browser versi 4 dan pada versi sebelumnya, hanya internet explorer yang masih mampu mengenal CSS. Tampilan CSS dapat berbeda jika ditampilkan pada menu browser yang berbeda Sifat CSS Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu. Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju

13 22 berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut Fakta menggunakan CSS Fakta Menggunakan CSS diantaranya : 1. Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama. 2. Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama. 3. Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan. 4. Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya. 5. Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser. 6. CSS adalah layouting masa depan dengan penggabungan bersama XHTML Pengenalan Adobe Dreamweaver CS5 Dreamweaver 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), yang intinya adalah bahwa anda tidak harus berurusan dengan tag-tag HTML untuk membuat

14 23 sebuah situs. Selain itu dreamweaver juga memberikan keleluasaan untuk menggunakan sebagai media penulisan bahasa pemrograman web. Adobe kembali mengeluarkan varian terbaru dari dreamweaver yaitu Dreamweaver CS5. Ada beberapa fitur baru yang dapat ditemukan pada versi terbaru Dreamweaver CS5 ini, diantaranya integrasi dengan Adobe Business Catalyst, integrasi Adobe Browser Lab, integrasi dengan CMS, pengecekan CMS, dan lain-lain. Selain itu juga ada beberapa fitur dalam versi Dreamweaver CS 4 yang tidak disertakan atau ditemukan kembali dalam Dreamweaver CS 5, diantaranya fasilitas pembuatan web album foto, penambahan flash paper, beberapa beaviour javascript, dan lain-lain menurut MADCOMS (2010). Dreamweaver CS5 mempunyai ruang kerja yang dapat digunakan untuk mendesain sebuah halaman web. Selain itu kita juga dapat mengubah tampilan umum dari ruang kerja Dreamweaver CS5. Adapun elemen-elemen ruang kerja dari dreamweaver CS5 adalah sebagai berikut: a. Application Bar Berada dibagian paling atas jendela aplikasi Dreamweaver CS5. Baris ini berisi tombol workspace (workspace switcher), CS Live, Menu dan aplikasi lainnya. b. Toolbar Document Berisi tombol-tombol yang yang digunakan untuk mengubah tampilan jendela dokumen, sebagai contoh tampilan design atau tampilan kode. Selain itu juga dapat digunakan untuk operasi-operasi umum, misalnya untuk melihat hasil sementara halaman web pada jendela browser.

15 24 c. Jendela Dokumen Lembar kerja tempat membuat dan mengedit desain halaman web. d. Workspace Switcher Digunakan untuk mengubah tampilan ruang kerja (workspace) Dreamweaver CS5. Sebagai contoh mengubah tampilan menjadi tampilan classic, yaitu tampilan ruang kerja Dreamwaver versi sebelumnya. e. Panel Groups Kumpulan panel yang saling berkaitan, panel-panel ini dikelompokkan pada judul-judul tertentu bedasarkan fungsinya. Panel ini digunakan untuk memonitor dan memodifikasi pekerjaan. Secara default, panel groups berisi panel adobe browser lab, adobe business catalyst, insert, cs5 styles, ap element dan files. f. Tag Selector Terletak dibagian bawah jendela dokumen, satu baris dengan status bar. Bagian ini menampilkan hirarki pekerjaan yang sedang tetrpilih pada jendela dokumen, dapat juga digunakan untuk memilih objek pada jendela desain bedasarkan jenis atau kategori objek tersebut. Tag selector juga menampilakan informasi format dari bagian yang sedang aktif pada lembar kerja desain. g. Property Inspector Digunakan untuk melihat dan mengubah berbagai properti objek atau teks pada jendela desain. Properti untuk satu objek dengan objek lainnya selalu berbeda-beda. Jendela ini tidak dapat diuraikan pada tapilan jendela kode.

16 25 h. Toolbar Standard Baris toolbar ini berisi tombol-tombol yang mewakili perintah pada menu File dan Edit, diantaranya adalah perintah new, open, save, save all, cut, copy, paste, undo dan redo. i. Toolbar Style Rendering Secara default disembunyikan. Toolbar ini berisi tombol-tombol untuk menampilkan desain dalam media yang berbeda. Selain itu juga dignakan untuk mengaktifkan dan menonaktifkan style CSS. j. Toolbar Coding Berisi tombol-tombol yang digunakan untuk melakukan operasi kode-kode standar. Jendela ini hanya tampil pada jendela kode. k. Toolbar Browser Navigation Toolbar ini merupakan toolbar baru yang ada didalam Dreamweaver CS5 dan letaknya tepat berada diatas jendela dokumen. Toolbar ini berisi tomboltombol yang digunakan sebagai navigasi didalam browser Java Script JavaScript pertama kali diperkenalkan oleh Netscape pada tahun Pada awalnya bahasa yang sekarang disebut javascript ini dulunya dinamai livescript yang berfungsi sebagai bahasa sederhana untuk browser netscape navigator 2 yang sangat populer pada saat itu.

17 26 Kemudian sejalan dengan sedang giatnya kerjasama antara netscape dan sun (pengembang bahasa pemrograman Java) pada masa itu, maka netscape memberikan nama javascript kepada bahasa tersebut pada tanggal 4 desember Pada saat yang bersamaan microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai Jscript di browser milik mereka yaitu internet explorer 3. JavaScript sendiri merupakan modifikasi dari bahasa pemrograman C++ dengan pola penulisan yang lebih sederhana dari bahasa pemrograman C Pengertian javascript JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web, sederhananya kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk dibrowser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program. Javascript merupakan bahasa scripting yang digunakan untuk membuat aplikasi web, sifatnya client-side sehingga dapat diolah langsung di browser tanpa harus terhubung ke server terlebih dahulu. Walaupun namanya menggunakan kata Java, Javascript tidak berhubungan dengan bahasa

18 27 pemprograman java, meskipun keduanya memiliki kemiripan dalam hal syntax yang meniru bahasa C. Nama Asli dari bahasa ini adalah livescript yang kemudian diganti karena adanya perjanjian kerjasama antara netscape dan sun dengan balasan netscape memperbolehkan untuk membundel browse mereka dengan menggunakan Java dan sun. JavaScript merupakan merk terdaftar milik sun microsystem, inc dan dilisensikan oleh sun untuk netscape comunications dan entitas lainnya seperti mozilla foundation Kegunaan javascript Kegunaan utama JavaScript adalah untuk menuliskan fungsi yang disisipkan kedalam HTML baik secara langsung disisipkan maupun diletakan ke file teks dan di link dari dokumen HTML. Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan (embedded). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain-lain. 1. Anti Klik Kanan Kode javascript ini buat menonaktifkan klik kanan di blog, jadi pengunjung tidak bisa klik kanan dan melihat source kode blog. Cari kode <body> di template blog lalu ganti dengan kode dibawah ini. <body oncontextmenu= return false; >

19 28 2. Kotak Pesan Peringatan ( alert box ) Pesan Pembuka Kode ini untuk menampilkan pesan saat pengunjung pertama kali membuka atau mengunjungi blog. Cari kode </head> di template blog, lalu copy paste kode di bawah ini tepat di bawahnya. Tinggal di edit kalimat yang di highlight. <script type= text/javascript > alert( SELAMAT DATANG DI BLOG INI ); </script> Pesan Penutup Kode ini muncul ketika pengunjung mau meninggalkan atau menutup tab blog. Cara pasangnya sama dengan pesan pembuka, cari kode </head> lalu copy paste kode berikut di bawahnya. Tinggal di edit kalimat yang di highlight sesuai keinginan. <script type= text/javascript > window.onbeforeunload=function(){ return confirm( Yakin Ingin Meninggalkan Blog Ini?? Masih Banyak Yang Menarik Loh Untuk Di Baca!! ); } </script> 3.Onmouseover Sound Kode ini memberikan backsound musik kalau pengunjung mengarahkan atau mengklik mousenya ke text atau gambar. Caranya tinggal copy paste kode di bawah ini ke mode HTML edit post blog kalian. <script language= javascript type= text/javascript > function playsound(soundfile) {document.getelementbyid( SCsound ).innerhtml= <embed src=\ "+soundfile+ \ hidden=\ true\ autostart=\ true\ loop=\ false\ /> ; } </script>

20 29 <span id= SCsound ></span> Lalu copy dan paste kode di bawah ini untuk menampilkan musik/soundnya. <a href= # onmouseover= playsound( URL-FILE-MUSIK/SOUND ); > Mouseover DISINI Buat Dengerin Musik</a> Atau <a href= # onclick= playsound( URL-FILE-MUSIK/SOUND ); >Klik DISINI Buat Dengerin Musik</a> Pilih mau yang onmouseover atau onclick. Lalu ganti url-file-musik/sound dengan Url file musik/sound. Silahkan di edit sendiri kalimatnya atau bisa juga diganti sama gambar. 4.Show Hide Konten / Spoiler Kode untuk menampilkan atau menyembunyikan konten, mirip tombol spoiler yang ada di forum-forum. Cara pasangnya gampang, cari kode </head> lalu copy paste kode javascript di bawah ini di atasnya. <script language= javascript type= text/javascript > function showhide() { var ele = document.getelementbyid( showhidediv ); if(ele.style.display == block ) { ele.style.display = none ; } else { ele.style.display = block ; } }</script> Sekarang tinggal tambahin kode di konten yang ingin di isi tombol buka tutupnya. <form action= " method= post > <input onclick= return showhide(); type= button value= Show-Hide /> </form> <div id= showhidediv style= display: none; > > Konten Disini < </div>

21 30 Konten bisa berupa gambar, teks atau apapun. Buat edit tulisan di tombolnya ganti show-hide sesuai keinginan. 5. Teks Berjalan / Marquee Kode ini bisa kalian gunakan untuk menampilkan teks berjalan. Kodenya sangat sederhana bisa juga untuk gambar atau link. Tinggal copy kode di bawah ini dan paste. <marquee onmouseover= this.stop() onmouseout= this.start() behavior= scroll direction= left bgcolor= #FF0000 >Teks, Link Atau Gambar Kalian Disini</marquee> Untuk merubah arahnya tinggal di ganti aja left sesuai keinginan kemana arah yang diinginkan. Buat behavior bisa juga diganti pake alternate atau slide, untuk bgcolor silahkan ganti warnanya.