BAB II LANDASAN TEORI

Transkripsi

1 BAB II LANDASAN TEORI 2.1 Website Website biasa juga disebut situs adalah sejumlah halaman yang memiliki topik saling terkait dengan informasi yang ada pada halaman website itu sendiri, biasanya sebuah website disertai juga dengan gambar, video ataupun jenis-jenis berkas lainya. Website biasanya diakases melalui jaringan internet oleh pengguna melalui peramban yang ada pada komputer. Website berdasarkan teknologinya terbagi menjadi dua, yaitu: Website Statis adalah sebuah website yang didalamnya terdapat berbagai macam jenis informasi dan data, namun halnya perubahan informasi dan data didalam sebuah website statis tidaklah mudah, dikarenakan pengelola harus membuka kembali kode HTML yang sudah tertata didalam sebuah rangkaian website, dikarenakan website statis tidak mempunyai database yang secara langsung terhubung dengan kode HTML pada halaman website itu sendiri. Website Dinamis adalah sebuah website yang sudah terhubung dengan database, maka dari itu website dinamis sangat mudah dikelola. Pengelolalan informasi dan data didalamnya tidak lagi mengubah isi kode pada halaman website, melainkan hanya perlu mengubahnya pada halaman belakang, pengelola yang mempunyai hak akses penuh pada halaman belakang sangat leluasa menjalankan fungsi dari sistem yang sudah tersedia pada website dinamis. 2.2 Content Management System (CMS) Content Management System atau yang lebih populer dengan singkatan CMS, pertama kali muncul sebagai jawaban atau solusi dari kebutuhan manusia akan penyediaan informasi yang sangat cepat. Masih segar dalam ingatan kita, betapa sederhananya sebuah website di era tahun 90-an. Dengan hanya mengandalkan 5

2 6 bahasa pemrograman HTML dan beberapa gambar serta informasi yang statis, sebuah perusahaan berusaha sebaik mungkin menampilkan informasi secukupnya kepada para pengunjung. Setiap kali ada perubahan informasi dalam perusahaan, pihak manajemen mau tak mau hasruslah berhubungan terlebih dahulu dengan pihak Humas sebelum akhirnya semua bahan diserahkan kepada pihak webmaster. Pihak inilah yang nantinya akan mengadakan perubahan terhadap isi website. Dapat dibayangkan bila hal yang sama terjadi terus menerus, berulang kali dan dalam kuantitas yang besar, seberapa banyak waktu dan tenaga yang dibutuhkan untuk memproses semuanya. Selain tidak efisien, biaya operasional yang harus dikeluarkan juga sangatlah besar. Tentu saja situasi seperti ini tidak diinginkan oleh setiap orang. Dapat dikatakan sebuah metode atau system yang dapat meningkatkan tingkat produktivitas dan efisiensi dalam pengembangan website sangatlah dibutuhkan. Dan salah satu solusi yang tepat untuk ini adalah dengan menerapkan Content Management System (CMS). CMS secara sederhana dapat diartikan sebagai berikut: Sebuah system yang memberikan kemudahan kepada para penggunanya dalam mengelola dan mengadakan perubahan isi sebuah website dinamis tanpa sebelumnya dibekali pengetahuan tentang hal hal yang bersifat teknis. Dengan demikian, setiap orang, setiap saat dapat menggunakannya secara leluasa untuk membuat, menghapus atau bahkan memperbaharui isi website tanpa campur tangan langsung dari pihak webmaster. CMS juga memberikan kefleksibelan dalam mengatur alur kerja atau workflow dan hak akses, sehingga memperbesar kesempatan berpartisipasi dari pengguna dalam pengembangan website. Hal ini akan sangat menguntungkan bila website yang dikelola memiliki kompleksitas yang tinggi dan mengalami kemajuan yang cukup pesat.

3 Manfaat CMS Selain dari beberapa hal yang telah disebutkan di atas, CMS juga dapat memberikan sejumlah manfaat kepada penggunanya yang dapat dijabarkan sebagai berikut: Memanajemen data. Mengatur siklus hidup website. Mendukung web templating dan standarisasi. Personalisasi website. 2.3 Metode Waterfall Metode waterfall merupakan model klasik yang sederhana dengan aliran system linier. Output dari setiap tahap merupakan input bagi tahap berikutnya. Model ini pertama kali diperkenalkan oleh Winston Royce tahun Tahap penelitian model waterfall meliputi metodelogi berupa: Analisa Kebutuhan Desain Pengkodean Pengujian Pemeliharaan Gambar 2.1 Metode Waterfall 1. Analisa Kebutuhan, langkah ini merupakan analisa terhadap kebutuhan sistem, penentuan dari definisi sistem yang diperlukan, penjelasan dan tujuan dari sistem dapat diperoleh melalui komunikasi dan konsultasi.

4 8 2. Desain, proses pembuatan desain tahap awal merancang tampilan CMS baik dari halaman belakang sebagai pengelola, dan halaman depan sebagai halaman pengunjung sehingga menghasilkan desian interface yang atraktif dan user friendly. Proses desain menerjemahkan kebutuhan kedalam sebuah perancangan perangkat lunak yang dapat diperkirakan sebelum memulai pengkodean. 3. Pengkodean, proses pengkodean CMS dengan framework Codeigniter yang mengacu kepada rancangan desain yang telah dibuat sehingga menjadi aplikasi yang siap dijalankan. 4. Pengujian, proses pengujian sistem pada CMS, apakah setiap fungsi dari sistem yang dibuat didalam pengkodean sudah berjalan dengan baik atau tidak, jika masih terdapat kesalahan pada fungsi maka akan dilakukan kembali tahap analisa dimana untuk mengetahui kesalahan yang muncul. 5. Pemeliharaan, Perangkat lunak yang sudah disampaikan kepada pelanggan pasti akan mengalami perubahan. Perubahan tersebut bisa karena mengalami kesalahan karena perangkat lunak harus menyesuaikan dengan lingkungan (periperal atau sistem operasi baru), atau karena pelanggan membutuhkan perkembangan fungsional atau unjuk kerja. 2.4 Basis Data Basis Data adalah kumpulan informasi yang disimpan di dalam komputer secara sistematik sehingga dapat diperiksa menggunakan suatu program komputer untuk memperoleh informasi dari basis data tersebut. Dua tujuan utama konsep basis data adalah meminimalkan redundancy (duplikasidata, penyimpanandata secaraberulang) dan diperoleh data independen. Kemampuan untuk mengubah struktur data tanpa mengubah program untuk memproses data. Hal ini dapat dicapai dengan menempatkan data spesifik pada suatu table yang secara fisik terpisah dari programnya. Program akan mereferensi table untuk mengakses data, perubahan struktur data hanya dilakukan sekali pada table.

5 Class Diagram Diagram kelas atau class diagram menggambarkan struktur sistem dari segi pendefinisian kelas-kelas yang akan dibuat atau membangun sistem. Kelas memiliki apa yang disebut atribut dan metode atau operasi. Atribut merupakan variable-variable yang dimiliki oleh suatu kelas Operasi atau metode adalah fungsi-fungsi yang dimiliki oleh suatu kelas. Kelas-kelas yang ada pada struktur sistem harus dapat melakukan fungsi-fungsi sesuai dengan kebutuhan sistem. Susunan struktur kelas yang baik pada diagram kelas sebaiknya memiliki jenis-jenis kelas berikut : Kelas main kelas yang memiliki fungsi awal dieksekusi ketika sistem dijalan kan. Kelas yang menangani sistem. Kelas yang mendefinisikan dan mengatur tampilan kepemakaian. Kelas yang diambil dari pendefinisian use case. Kelas yang menangani fungsi-fungsi yang harus ada diambil dari pendefinisian use case. Kelas yang diambil dari pendefinisian data. Kelas yang digunakan untuk memegang atau membungkus data menjadi sebuah kesatuan yang diambil maupun akan disimpan ke basisdata. Berikut adalah symbol-symbol yang sering digunakan pada saat pembuatan class diagram. Tabel 2.1 Simbol-simbol Class Diagram Simbol Deskripsi Class Kelas pada struktur sistem. 1 Antarmuka / interface Sama dengan konsep interface dalam pemograman berorientasi objek. Asosiasi / association Relasi antar kelas dengan umum,

6 10 Asosiasi berarah / directed association Generalisasi Kebergantungan / dependency asosiasi biasanya juga disertai dengan multiplicity. Relasi antar kelas dengan makna kelas yang satu digunakan oleh kelas yang lain, asosiasi biasanya juga disertai dengan multiplicity. Relasi antar kelas dengan makna generalisasi-spesialisasi (umumkhusus) Relasi antar kelas dengan makna kebergantungan antar kelas. 2.5 Unified Modeling Language (UML) Unified Modelling Language (UML) adalah salah satu alat bantu yang sangat handal di dunia pengembangan sistem yang berorientasi obyek. Hal ini disebabkan karena UML menyediakan bahasa pemodelan visual yang memungkinkan bagi pengembangan sistem untuk membuat cetak biru atas visi mereka dalam bentuk yang baku, mudah dimengerti serta dilengkapi dengan mekanisme yang efektif untuk berbagi dan mengkomunikasikan rancangan mereka dengan yang lain. UML adalah hasil kerja dari konsorsium sebagai organisasi yang berhasil dijadikan sebagai standar buku dalam OOAD (Object Oriented Analysis & Design) Use Case Diagram Use case adalah deskripsi fungsi dari sebuah sistem dari perspektif pungguna. Use case bekerja dengan cara deskripsikan tipikal interaksi pada antar user (pengguna) sebuah sistem dengan sistemnya sendiri melalui sebuah cerita bagaimana sebuah sistem dipakai.

7 11 Dalam pembicaraan tentang use case, pengguna biasanya disebut dengan aktor. Aktor adalah sebuah peran yang bisa dimainkan oleh pengguna dalam interaksinya dengan sistem. Notasi-notasi yang digunakan dalam pemodelan dengan use case dapat dilihat pada table berikut ini : Tabel 2.2 Notasi Use case Diagram NO GAMBAR NAMA KETERANGAN 1 Actor 2 Dependency Menspesifikasikan himpuan peran yang pengguna mainkan ketika berinteraksi dengan use case. Hubungan dimana perubahan yang terjadi pada suatu elemen mandiri (independent) akan mempengaruhi elemen yang bergantung padanya elemen yang tidak mandiri (independent). 3 Generalizati on Hubungan dimana objek anak (descendent) berbagi perilaku dan struktur data dari objek yang ada di atasnya objek induk (ancestor). 4 Include 5 Extend 6 Association Menspesifikasikan bahwa use case sumber secara eksplisit. Menspesifikasikan bahwa use case target memperluas perilaku dari use case sumber pada suatu titik yang diberikan. Apa yang menghubungkan antara objek satu dengan objek lainnya.

8 12 7 System Menspesifikasikan paket yang menampilkan sistem secara terbatas. 8 Use Case Deskripsi dari urutan aksi-aksi yang ditampilkan sistem yang menghasilkan suatu hasil yang terukur bagi suatu aktor 9 Collaborati on Interaksi aturan-aturan dan elemen lain yang bekerja sama untuk menyediakan prilaku yang lebih besar dari jumlah dan elemen-elemennya (sinergi). 10 Note Elemen fisik yang eksis saat aplikasi dijalankan dan mencerminkan suatu sumber daya komputasi Activity Diagram Activity diagram merupakan bagian dari model dinamis yang digunakan untuk menggambarkan work flow atau proses sistem kita. Diagram ini menunjukkan bagaimana suatu proses dimulai, kemudian alur proses dari setiap keputusan yang ada hingga berakhirnya proses. Serta diagram ini juga mungkin untuk menampilkan proses yang terjadi secara parallel. Activity diagram memungkinkan siapapun yang melakukan proses untuk memilih urutan dalam melakukannya. Dengan kata lain, diagram hanya menyebutkan aturan-aturan rangkaian dasar yang harus kita ikuti. Hal ini penting untuk pemodelan bisnis karena proses-proses sering muncul secara paralel. Notasi-notasi yang digunakan dalam pemodelan activity dapat dilihat pada table berikut ini:

9 13 Tabel 2.3 Notasi Activity Diagram No. Notasi Keterangan 1. Titik awal, digunakan untuk menggambarkan awal dari diagram aktifitas 2. Titik akhir, digunakan untuk menggambarkan akhir dari diagram aktifitas 3. Aktivitas, digunakan untuk menggambarkan aktifitas dalam diagram aktifitas 4. Pilihan utuk pengembalian keputusan, digunakan untuk menggambarkan kelakuan pada kondisi tertentu. 5. Akhir alur (flow final), digunakan untuk menghancurkan semua tanda yang dating dan tak memiliki efek alur dalam aktifitas. 6. Fork ; digunakan untuk menunjukkan kegiatankegiatan yang dilakukan secara paralel tau untuk menggabungkan dua kegiatan paralel menjadi satu. 7. Rake ; menunjukkan adanya dokumposisi 8. Tanda waktu 9. Node Fork memiliki satu aksi yang masuk dan beberapa aksi yang keluar. 10 Join mode digunakan untuk menggambarkan beberapa aksi yang masuk dan satu aksi yang keluar. 11. Tanda Pengiriman

10 Tanda Penerimaan 2.6 Framework Framework secara sederhana dapat diartikan sebuah kerangka kerja yang berisi kumpulan kode-kode program berupa fungsi yang sudah terorganisasi dan terintegrasi didalam sebuah library yang bertujuan untuk mempermudah dalam membangun atau mengimplementasikan sebuah aplikasi. Pengguna framework biasanya hanya perlu mendeklarasikan dengan memanggil fungsi-fungsi yang dibutuhkan pengguna dari library framework, sehingga hal ini menjadi lebih efisien dibandingkan harus membuat fungsi-fungsi dari awal. 2.7 Codeigniter Codeigniter adalah sebuah aplikasi open source yang berupa framework dengan konsep dan model MVC (Model View Controller) untuk membangun sebuah website dinamis menggunakan PHP. Codeigniter memudahkan pengguna sebagai developer untuk membuat aplikasi website dinamis dengan cepat dan mudah dibandingkan dengan merancang kode-kode dan fungsi dari awal Struktur Flow Codeigniter Pada struktur ini akan dapat diketahui bagaimana alur kerja dari Codeigniter, dan tidak lepas pada konsep MVC. Berikut ini adalah gambar dari struktur flow codeigniter: Gambar 2.2 Flow Codeigniter

11 15 File index.php sebagai bagian controller terdepan, menginiasi resource Codeigniter. Router menguji request HTTP dan menerjemahkan kemana akan diarahkan. Jika file chahe ada, maka akan dikirim langsung ke peramban, dan mem-baypass proses eksekusi normal. Security. Sebelum aplikasi controller dimuat, HTTP request and data yang di-submit user akan difilter untuk alasan keamanan. Controller dapat memuat model, core libraries, plugins, helpers, resource lain yang ditentukan secara spesifik. Di bagian akhir adalah View, dimana seluruh proeses akan dirender yang kemudian dikirim ke peramban Model View Controller (MVC) MVC adalah adalah development pattern yang memisahkan logic aplikasi dengan bagian presentation. Codeigniter dibuat dengan menggunakan model MVC sehingga meminimalkan pembuatan kode yang harus kita buat. Model merepresentasikan struktur data dari aplikasi. Pada intinya, di model ini memiliki banyak fungsi yang terfokus untuk melakukan pengambilan dan memilih, menyisipkan, memperbarui, dan menghapus data dari database. View adalah bagian yang diperlihatkan kepada pengunjung. Jadi, halaman website yang ditampilkan diperamban adalah kode yang dituliskan dibagian view. Sebuah view dapat berupa file penuh, atau hanya potongan seperti bagian atas dan bawah pada desain template. Controller bertugas untuk menjembatani antara model dan view. Selain itu controller juga bertugas untuk mengambil library yang ada pada Codeigniter.

12 PHP PHP (Hypertext Preprocessor) adalah bahasa pemograman berbasis website pada umumnya. PHP banyak dipakai untuk memprogram website dinamis. Tujuan utama penggunaan bahasa ini adalah untuk memungkinkan pengguna sebagai developer dapat membuat website dinamis. Program ini bisa menghubungkan antara databse yang tersedia dengan tujuan menampilkan data yang ada didalam database kedalam halaman website yang akan ditampilkana oleh peramban. Program ini dapat berdiri sendiri ataupun disisipkan di antara kode-kode html sehingga dapat langsung ditampilkan bersama dengan kode-kode html Struktur Kode PHP Pada penulisan kode php dibutuhkan syntax pembuka dan penutup didalamnya, maka kode-kode dan fungsi yang akan rancang bisa dituliskan diantara syntax pembuka dan penutup pada php. Berikut adalah contoh dari struktur penulisan kode php: <?php //syntax pembuka php Echo Haloo Php ; disini //kode-kode dan fungsi dituliskan?> //syntax penutup php Gambar 2.3 Struktur PHP 2.9 HTML HTML singkatan dari HyperText Markup Language yaitu sebuah bahasa markup yang digunakan untuk membuat sebuah halaman website, menampilkan berbagai informasi di dalam sebuah penjelajah Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII (American Standard Code For Information Interchange) agar dapat menghasilkan tampilan wujud yang terintegerasi. HTML (Hyper Text Markup Language) mrupakan bahasa pemrograman website yang memiliki sintak atau aturan tertentu dalam menuliskan script atau

13 17 kode-kode, sehingga peramban dapat menampilkan informasi dengan membaca kode-kode HTML Struktur Dasar HTML Kode html ditulisakan didalam text-editor seperti notepad, kemudian kode-kode yang sudah dituliskan dismpan dengan ekstensi.html setelah itu file dapat segera dibuka melalui peramban yang tersedia, maka hasil kode-kode yang dituliskan akan tampil diperamban. Berikut adalah contoh struktur penulisannya: <html><! tag pembuka html--> <head> <title>halo HTML</title><! akan tampil pada title bar peramban--> </head> <body> <h1>judul Halo HTML</h1>><! akan tampil pada body peramban--> </body> </html><! tag penutup html--> Gambar 2.4 Struktur HTML 2.10 Cascading Style Sheet (CSS) CSS (casacading Style Sheet) digunakan untuk membantu anda dalam mendesain isi halaman web. Ketika anda memiliki sebuah halaman web yang terdiri dari beberapa file, untuk melakukan pemformatan pada halaman tersebut, anda tidak perlu memformat satu persatu, tetapi anda cukup membuat satu file di CSS. CSS dapat dipasang pada dokumen HTML yang telah jadi. CSS memiliki tiga bagian yaitu Selector, Properti dan Nilai. Penulisan property dan nilai dipisahkan oleh tanda titik-dua (:), jika nilai terdiri dari satu kata, penulisan nilai dapat dengan tanda petik dua, misalnya penulisan Times New Roman. Dibawah ini adalah contoh bentuk penulisan CSS:

14 18 Selector {Property:nilai} Body {Color:#336699} /*jika nilai lebih dari satu kata penulisannya*/ Body {Font-family: Palatino Linotype, Book Antiqua,serif;} Gambar 2.5 Contoh Penulisan CSS 2.11 Javascript JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks website, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk diperamban atau halaman website agar halaman website 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. Dibawah ini adalah contoh dari penulisan kode javascript : <script type= teks/javascript > alert( Halo Dunia! ); </script> Gambar 2.6 Contoh Penulisan Javascript 2.12 JQuery jquery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML. jquery dirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. Sesuai slogannya, writeless, do more. Menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih banyak. Berikut ini adalah contoh program sederhana jquery:

15 19 <script> $(document).ready(function(){ $(".hide_photo").click(function(){ $("#foto").hide("slow"); }); $(".show_photo").click(function(){ $("#foto").show("slow"); }); }); </script> Gambar 2.7 Contoh Program Sederhana jquery Berikut adalah penjelasan dari kode diatas: $(document).ready(function() jquery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan semua dihalaman website. $(".show_photo"), $(".hide_photo"), $("#foto") setelah semua Elemen ditampilkan, kemudian jquery akan memilih elemen berdasarkan id, class atau tag. Atau lebih dikenal dengan selector. Setelah elemen dipilih, berikutnya adalah memberikan aksi atau operasi terhadap elemen yang sudah dipilih Ajax AJAX ( Asynchronous Javascript and XML ) adalah suatu teknik yang dapat ditambahkan kedalam kode PHP, dan Html yang memungkinkan untuk membuat aplikasi website yang bersifat interaktif. Pengertian interaktif disini yakni aplikasi website dapat mengakses data pada server tanpa mempengaruhi halaman keseluruhan. Dengan kata lain, hanya bagian tertentu dari halaman website yang akan diperbarui. Dalam hal ini, data diakses melalui objek XMLHttpRequest. Berikut ini adalah contoh proram sederhana dengan ajax:

16 20 <script> $(function(){ $("#menu a").click(function() { url = $(this).attr("href"); $("#container").load(url); return false; }); $(document).ajaxstart(function(){ $("#loading").fadein(); $("#container").fadein(function(){ $(this).css({"opacity":"0.1"}); }); }); $(document).ajaxcomplete(function(){ $("#loading").hide(); $("#container").css({"opacity":"1"}); }); }); </script> Gambar 2.8 Contoh Program Sederhana Ajax Berikut adalah penjelasan dari kode diatas: (#menu a) adalah link berupa elemen (a href) didalam id menu yang akan di klik. url = $(this).attr( href ) adalah isi variabel url yang merupakan isi dari atribut link berupa (href). $( #container ).load(url) adalah funsi untuk menampilkan content dari url yang di klik keelemen (container) Twitter Bootstrap Twitter Bootstrap adalah sebuah CSS framework atau bisa dikatakan alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Twitter Bootstrap dibangun dengan teknologi HTML,CSS dan Javacsript yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi-fungsi classnya dalam berkas HTML yang telah didefinisikan.

17 Struktur Twitter Bootstrap Twitter bootstrap mempunyai dua struktur yaitu pada penemepatan berkas, dan penempatan pada sebuah halaman html. Inilah struktur-struktur dari twitter bootstrap : Struktur Berkas Twitter Bootstrap Pada dasarnya twitter bootstrap mempunyai struktur pengimplementasian dari penempatan filenya yaitu file yang akan terintegrasi pada sebuah halaman html yang akan di buat. Inilah gambaran dari struktur file twitter bootstrap : Bootstrap/ --- Css/ ---- bootstrap.css ---- bootstrap-responsive.css --- Js/ ---- bootstrap.js --- Img/ ---- glyphicons-halflings.png ---- glyphicons-halflings-white.png Gambar 2.9 Struktur Berkas Twitter Bootstrap Penjelasan dari struktur berkas-berkas pada Twitter Bootstrap adalah : bootstrap-responsive.css file ini digunakan untuk mengatur layout halaman website, dan keunggulannya file ini dapat menyesuaikan sendiri ukuran website pada device yang digunakan, seperti desktop, smartphone, dan tablet. bootstrap.css file ini digunakan untuk mengatur keseluruhan style css didalam bootstrap. glyphicons-halflings.png file pertama merupakan image icon yang digunakan untuk icon-icon dibootstrap.

18 22 glyphicons-halflings-white.png file kedua sama dengan glyphiconshalflings.png cuma background yang digunakan berwarna putih sedang glyphicons-halflings.png background icon yang digunakan berwarna hitam. bootstrap.js merupakan sebuah file pengaturan javascript yang menangani semua event-event didalam bootstrap Struktur Twitter Bootstrap Pada Html Pada penempatannya didalam halaman html, berkas-berkas twitter bootstrap haruslah di dimasukan pada bagian bawah setelah tags <head> dan diatas tags </head> serta juga menambahkan tags yang wajib di masukan di halaman html. Inilah struktur twitter bootstrap pada html : <head> <meta name="viewport" content="width=device-width, initialscale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen"> <script src="js/bootstrap.min.js"></script> </head> Gambar 2.10 Struktur Twitter Bootstrap Pada HTML 2.15 MySQL MySQL adalah sebuah perangkat lunak sistem manajemen basisdata. SQL (Structured Query Language). SQL adalah sebuah konsep pengoperasian basisdata, terutama untuk pemilihan atau seleksi dan pemasukan data, yang memungkinkan pengoperasian data dikerjakan dengan mudah secara otomatis. MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunanya tidak cocok dengan pengguna GPL. MySQL merupakan implementasi dari sistem manajemen basisdata relasional

19 23 RDBMS (Relational Database Management System) yang didistribusikan secara gratis dibawah lisensi GPL (General Public License). SQL (Structured Query Language) merupakan bahasa yang dirancang untuk berkomunikasi dengan database. Tujuan dirancang SQL ialah untuk mengefisiensikan dan menyederhanakan dalam membaca atau menulis data dari atau kedalam database. Terdapat tiga elemen penting dalam SQL. 1. Data Definition Language (DDL) Statmen-statmen yang berhubungan dengan pembuatan objek (misalnya table) dan pengelolaan strukturnya. 2. Data Manipulation Language (DML) Statmen-statmen yang berhubungan dengan pemanipulasian data didalam table 3. Data Control Language (DCL) Statmen-statmen control seperti COMMIT dan ROLLBACK 2.16 XAMPP XAMPP merupakan perangkat lunak open source yang mendukung banyak sistem operasi, merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemograman PHP. Nama XAMPP merupakan singkatan dari X (empat sistem operasional apapun), Apache, MySQL, dan PHP. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halam web yang dinamis. Berikut adalah tampilan XAMPP pada peramban.

20 24 Gambar 2.11 Tampilan Xampp Pada Peramban Sebelum menjalankan suatu aplikasi website anda harus menghidupkan service yang akan anda butuhkan untuk menjalankan aplikasi dengan memilih tombol start pada setiap service yang ingin dijalankan yang berada pada XAMPP Control Panel Application. Berikut adalah tampilannya dari Xampp Contorl Panel. : Gambar 2.12 Tampilan Xampp Control Panel