BAB 2 LANDASAN TEORI. Suatu aplikasi web (bahasa Inggris: web application atau sering disingkat webapp)

Transkripsi

1 BAB 2 LANDASAN TEORI 2.1 Pengertian Aplikasi Web Suatu aplikasi web (bahasa Inggris: web application atau sering disingkat webapp) adalah suatu aplikasi yang diakses menggunakan penjelajah web melalui suatu jaringan seperti Internet. Ia juga merupakan suatu aplikasi perangkat lunak komputer yang dikodekan dalam bahasa yang didukung penjelajah web (seperti HTML, JavaScript, AJAX, Java, dll) dan bergantung pada penjelajah tersebut untuk menampilkan aplikasi. Aplikasi web menjadi populer karena kemudahan tersedianya aplikasi klien untuk mengaksesnya, penjelajah web, yang kadang disebut sebagai suatu thin client(klien tipis). Kemampuan untuk memperbarui dan memelihara aplikasi web tanpa harus mendistribusikan dan menginstalasi perangkat lunak pada kemungkinan ribuan komputer klien merupakan alasan kunci popularitasnya. Aplikasi web yang umum misalnya webmail, papan diskusi, weblog, serta MMORPG (Massively multiplayer online role-playing game).

2 8 2.2 PHP (Hypertext Preprocessor) PHP (Hypertext Preprocessor) adalah salah satu bahasa Server-side yang di desain khusus untuk aplikasi web yang bersifat dinamis. Artinya, ia dapat membentuk suati tampilan berdasarkan permintaan terkini. Misalnya, Anda bisa menampilkan isi basis data ke halaman web. Adapun beberapa kelebihan PHP yaitu : 1. PHP mudah dibuat dan kecepatan akses tinggi 2. PHP dapat berjalan dalam web server yang berbeda dan dalam sistem operasi yang berbeda pula 3. PHP dapat berjalan di sistem operasi UNIX, Windows98, Windows NT dan Macintosh 4. PHP termasuk bahasa yang embedded (bisa ditempel atau diletakkan dalam tag HTML) Sejarah Singkat PHP Kelahiran PHP bermula saat Rasmus Ledorf membuat sejumlah skrip Perl yang dapat mengamati siapa saja yang melihat-lihat daftar riwayat hidupnya yakni pada tahun Skrip-skrip ini selnajutnya dikemas menjadi tool yang disebut Personal Home Page. Paket inilah yang menjadi cikal-bakal PHP. Pada tahun 1995, Rasmus menciptakan PHP/FI Versi 2. Pada versi inilah pemrograman dapat menempelkan kode terstruktur di dalam tag HTML. Yang menarik, kode PHP juga bisa

3 9 berkomunikasi dengan basis data dan melakukan perhitungan-perhitungan yang kompleks sambil jalan (running) Skrip PHP Skrip PHP berkedudukan sebagai tag dalam bahasa HTML. Sebagaimana diketahui, HTML (HyperText Markup Language) adalah bahasa standar untuk membuat halaman-halaman web. Berikut ini contoh kode PHP yang berada di dalam kode HTML: <HTML> <HEAD> <TITLE> Contoh </TITLE> </HEAD> <BODY> Belajar PHP. <BR> <?PHP Printf( Tgl. Sekarang: %s, Date ( d F Y ));?> </BODY> </HTML>

4 10 Kode tersebut disimpan dengan ekstensi.php. Perhatikan baris-baris berikut: <?PHP?> Printf( Tgl. Sekarang: %s, Date ( d F Y )); Kode inilah yang merupakan kode PHP. Kode PHP diawali dengan <?php dan diakhiri dengan?>. Pasangan kedua kode inilah yang berfungsi sebagai tag kode PHP. Berdasarkan tag inilah, pihak server dapat memahami kode PHP dan kemudian memprosesnya. Hasilnya dikirim ke browser. Contohnya diperlihatkan pada gambar berikut. Gambar 2.1 Tampilan kode PHP pada browser Konsep Kerja PHP Model kerja PHP diawali dengan permintaan suatu halaman web oleh browser. Berdasarkan URL (Uniform Resource Locator) atau dikenal dengan sebuah alamat internet, browser mendapatkan alamat dari web server, mengidentifikasi halaman

5 11 yang dikehendaki, dan menyampaikan segala informasi yang dibutuhkan oleh web server. Ketika berkas PHP yang diminta didapatkan oleh web server, isinya segera dikirimkan ke mesin PHP dan mesin inilah yang memproses dan memberikan hasilnya (berupa kode HTML) ke web server. Selanjutnya web server menyampaikan ke client. Gambar 2.2 Skema PHP PHP dan Basis Data Salah satu kelebihan dari PHP adalah mampu berkomunikasi dengan berbagai basis data yang terkenal. Dengan demikian, menampilkan data yang bersifat dinamis, yang diambil dari basis data, merupakan hal yang mudah untuk diimplementasikan. Itulah

6 12 sebabnya sering dikatakan bahwa PHP sangan cocok untuk membangun halamanhalaman web dinamis. Pada saat ini PHP sudah dapat berkomunikasi dengan berbagai basis data meskipun dengan kelengkapan yang berbeda-beda. Beberapa diantaranya: 1. BASE, 2. DBM, 3. FilePro (Personix, Inc), 4. Informix, 5. Ingres, 6. InterBase, 7. Microsoft Access, 8. MSQL, 9. MySQL, 10. Oracle, 11. PostgreSQL, 12. Sybase. Namun dalam perancangan tugas akhir ini penulis menggunakan MySQL sebagai basis data pendukung.

7 MYSQL Untuk menciptakan suatu sistem pengolahan data dibutuhkan suatu basis data untuk penyimpanan informasi. Model basis data yang umum digunakan sekarang adalah model rasional, yaitu semua informasi diwakili dalam bentuk tabel-tabel yang saling berhubungan dimana setiap tabel terdiri baris dan kolom. MySQL adalah salah satu jenis server basis data yang sangat terkenal. Kepopulerannya disebabkan MySQL menggunakan SQL sebaagai bahasa dasar untuk mengakses basis datanya. Selain itu, ia bersifat Open Source (Anda tidak perlu membayar untuk menggunakannya) pada pelbagai platform (kecuali untuk jenis Enterprise, yang bersifat komersial). Perangkat lunak MySQL bisa di unduh dari Sejarah MySQL MySQL dikembangkan sekitar tahun 1994 oleh pembuat perusahaan pengembang software dan konsultan basis data bernama MYSQL AB yang berada di Swedia. Waktu itu perusahaan tersebut masih bernama TcX DataKonsult AB, dan tujuan awal dikembangkannya MySQL adalah untuk mengembangkan aplikasi berbasis web pada client. Awalnya Michael Monty Widenius, pengembang satu-satunya di TxC memiliki sebuah aplikasi UNIREG dan rutin ISAM buatannya sendiri dan sedang

8 14 mencari antarmuka SQL yang cocok untuk diimplementasikan ke dalamnya. Mulamula Monty memakai minisql (msql) pada eksperimennya itu, namun SQL dirasa kurang sesuai, karena terlalu lambat dalam pemrosesan query. Akhirnya Monty menghubungi David Hughes, pembuat msql yang sedang merilis versi kedua dari msql. Kemudian Monty mencoba membuat sendiri mesin SQL yamg memiliki antarmuka mirip dengan SQL, tapi dengan kemampuan yang lebih sesuai sehingga lahirlah MySQL. Tentang pengambilan nama MySQL, sampai saat ini masih belum jelas asal usulnya. Ada yang berpendapat nama My diambil dari nama depan dan belakang Monty, tetapi versi lain mengatakan nama itu diambil dari putri Monty yang kebetulan juga bernama My Data Definition Language (DDL) Dalam pengelolaan sebuah tabel secara umum dapat dilakukan dengan perintahperintah query baik itu Data Definition Language (DDL) maupun Data Manipulation Language (DML). Yang termasuk perintah DDL adalah CREATE, INSERT ALTER, UPDATE, DELETE dsb.

9 Data Manipulation Language (DML) Perintah DML berisi perintah lanjutan seperti perintah SELECT, fungsi agregat Query seperti MAX(), MIN(), AVG(), dan masih banyak lagi Penggunaan Join SQL JOIN menggabungkan catatan dari dua atau lebih tabel dalam basis data. Ini menciptakan satu set yang dapat disimpan sebagai meja atau digunakan sebagaimana mestinya. Sebuah JOIN adalah sarana untuk menggabungkan bidang dari dua tabel dengan menggunakan nilai-nilai bersama untuk masing-masing. Standar ANSI SQL menetapkan empat jenis JOIN : INNER, OUTER, LEFT JOIN, dan RIGHT JOIN Query MySQL Berikut ini terdapat beberapa fungsi MySQL pada pemrograman PHP, yaitu : Tabel 2.1 Query MySQL Nama Fungsi mysql_connect K e g u n a a n Digunakan untuk membuka hubungan (koneksi) dengan MySQL server.

10 16 mysql_pconnect Membuka hubungan (koneksi) permanen/tetap dengan MySQL server mysql_close mysql_create_db Menutup hubungan (koneksi) dengan MySQL server. Membuat sebuah basis data baru pada server basis data MySQL mysql_drop_db drop atau menghapus sebuah basis data pada server basis data MySQL mysql_select_db mysql_query mysql_db_query Memilih sebuah basis data sebagai basis data aktif Mengirim perintah SQL ke server MySQL untuk dieksekusi Mengirim perintah SQL ke server MySQL pada basis data aktif mysql_fetch_array mysql_result mysql_fetch_row mysql_affected_row Mengambil baris hasil sebagai array assosiatif Menampilkan data hasil query Menampilkan baris hasil array satu persatu. Menampilkan nomor baris akibat dari insert, update, delete yang terakhir mysql_num_rows Menampilkan nomor baris pada hasil. Perintah ini hanya bisa digunakan pada select mysql_fetch_field Mencari informasi kolom dari dari hasil, dan menampilkannya sebagai obyek mysql_fetch_lengths Menampilkan panjang beberapa field pada baris terakhir

11 17 mysql_fetch_object mysql_field_name mysql_list_fields mysql_num_fields mysql_field_seek mysql_field_type mysql_insert_id mysql_data_seek mysql_free_result mysql_errno Menampilkan baris hasil berupa obyek Menampilkan nama field tertentu Menampilkan daftar field Menampilkan nomor field Mencari field tertentu Mendapatkan tipe field tertentu Mendapatkan id dari operasi insert sebelumnya Memindahkan hasil internal Menampilkan memori yang bebas Menampilkan pesan error dari operasi yang dilakukan terakhir kali mysql_error Menampilkan pesan error berupa text dari operasi yang dilakukan terakhir kali mysql_list_dbs Menampilkan daftar basis data yang ada pada basis data MySQL mysql_list_tables mysql_field_len mysql_field_table mysql_tablename Menampilkan daftar tabel yang ada pada basis data MySQL Menampilkan panjang field tertentu Mendapatkan nama field dari tabel tertentu Mendapatkan nama tabel

12 Teknik Perancangan Basis Data Di dalam suatu organisasi yang besar, sistem basis data merupakan bagian penting pada sistem informasi, karena di perlukan untuk mengelola sumber informasi pada organisasi tersebut. Untuk mengelola sumber informasi tersebut yang pertama kali di lakukan adalah merancang suatu sistem basis data agar informasi yang ada pada organisasi tersebut dapat digunakan secara maksimal. Prinsip utama dari basis data adalah pengaturan data/arsip dengan tujuan utamanya adalah kemudahan dan kecepatan dalam mengambil kembali data/arsip. (Sumber ) Data Flow Diagram (DFD) Data Flow Diagram (DFD) merupakan suatu diagram yang menggambarkan alir data dalam suatu entitas ke sistem atau sistem ke entitas. DFD juga dapat diartikan sebagai teknik grafis yang menggambarkan alir data dan transformasi yang digunakan sebagai perjalanan data dari input menuju output. Berikut ini symbol-simbol DFD yang terbagi dalam dua versi, diantaranya menurut Gane/Sarson serta Yourdon/De Marco pada tabel 2.2

13 19 Tabel 2.2 Simbol Data Flow Diagram (DFD) Gane/Sarson Yourdon/ De Marco Nama Keterangan Simbol Entitas Eksternal Entiras eksternal dapat berupa orang/unit terkait yang berinteraksi dengan sistem tetapi di luar sistem Orang/unit yang mempergunakan atau Proses melakukan trasformasi data. Komponen fisik tidak diidentifikasikan Aliran Data Data Store Aliran data dengan arah khusus dari sumber ke tujuan. Penyimpanan data atau tempat data di-refer oleh proses Flowchart Flowchart atau bagan alir merupakan suatu diagram yang menggambarkan alur kerja suatu sistem. Berikut ini beberapa symbol yang digunakan dalam pembuatan flowchart pada tabel 2.3

14 20 Tabel 2.3 Simbol-simbol flowchart Simbol Keterangan Simbol Terminal, menyatakan permulaan atau akhir suatu program. Simbol process, menyatakan suatu tindakan (proses) yang dilakukan oleh computer. Simbol input/output. menyatakan proses input atau output tanpa tergantung jenis peralatannya. Simbol decision, menyatakan suatu kondisi tertentu yang menghasilkan dua kemungkinan jawaban : Ya/Tidak Simbol Connector, berfungsi menyatakan sambungan dari suatu proses ke proses lainnya dalam halaman yang sama. Simbol Off-page connector, menyatakan sambungan dari suatu proses ke proses lainnya dalam halaman yang berbeda. Simbol stored data, penyimpanan data secara sementara Simbol storage pada computer, misalnya menyimpan database.

15 Web Browser Untuk mengakses layanan WWW dari sebuah computer (yang disebut web server) digunakan program web client yang disebut web browser atau browser saja. Penggunaan browser pada dasarnya disesuaikan dengan sistem operasi yang digunakan oleh komputer user. Saat ini secara umum ada lima sistem operasi terbesar yang sering digunakan yaitu Linux, Android, ios, Mac OS X dan Microsoft Windows. Sedangkan browser adalah aplikasi atau program web client yang digunakan oleh para user dari masing-masing sistem operasi tersebut untuk dapat mengakses berbagai situs web yang ada dengan menggunakan jaringan internet atay intranet. Untuk memenuhi kebutuhan tersebut, masing-masing pengembang dari sistem operasi membangun berbagai browser yang kompatibel dengan sistem operasi yang ada. Dalam perancangan sistem aplikasi ini, penulis menggunakan Ch rome sebagai browser. Google Chrome adalah browser yang dikembangkan oleh Google yang menggunakan layout engine WebKit. Pertama kali dirilis sebagai versi beta untuk Microsoft Windows pada tanggal 2 September 2008 dan untuk versi stabilnya pada tanggal 11 Desember 2008.

16 HTML (HyperText Markup Language) HTML adalah suatu format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari suatu platform computer ke platform komputer lain tanpa perlu melakukan perubahan apapun. Dokumen HTML disebut markup language karena mengandung kode-kode tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Kita dapat menentukan baris-baris mana yang merupakan judul, menentukan gambar yang harus tampil dang pengaturan format pada teks dan lain sebagainya. Dengan sistem hypertext pada dokumen HTML, Kita tidak harus membaca suatu dokumen secara urut dari atas ke bawah. Kita langsung dapat menuju kepada topik-topik yang diinginkan. Dokumen HTML bisa mengandung teks, gambar, suara, flash dan video. Yang membedakan HTML dengan dokumen lain adalah adanya Tag- Tag HTML beserta tag-tagnya. Tag dan tag HTML berfungsi untuk memformat suatu bagian tertentu dari dokumen HTML. Dokumen HTML disusun oleh tiga bagian yaitu: 1. Baris yang berisi versi HTML yang digunakan 2. Deklarasi bagian header dengan Tag HEAD 3. Deklarasi bagian body dengan Tag BODY atau FRAMESET

17 23 Gambar 2.3 Contoh dokumen HTML sederhana Sewaktu browser menampilkan halaman web, browser akan membaca teks pada dokumen HTML dan mencari kode khusus yang disebut tag. Tag biasanya merupakan suatu pasangan tag awal < > dan tag akhir </ >. Kebanyakan browser akan menampilkan HTML dengan benar bahkan jika Kita lupa memberikan tag akhir. Elemen HTML yang tidak memiliki konten disebut dengan element kosong. Tag HTML tidak case sensitive, berarti <P> sama dengan <p>. Banyak situs web menggunakan tag HTML berhuruf besar. Tetapi sebaiknya Kita menggunakan tag HTML yang berhuruf kecil karena World Wide Consrotium (W3C) merekomendasikan penggunaan huruf kecil pada tag HTML.

18 24 Gambar 2.4 Salah satu website yang menggunakan tag-tag HTML

19 CSS (Cascading Style Sheets) Cascading Style Sheet berfungsi untuk mengatur tampilan dengan kemampuan jauh lebih baik dari tag maupun atribut 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. Syntax CSS memiliki dua bagian utama yaitu: 1. Selector berupa tag HTML dan pendeklarasian class dan id. Selector berfungsi untuk menentukan bagian mana pada HTML yang akan diterapkan style. 2. Deklarasi berupa parameter yang memiliki property dan value yang telah tersedia dalam CSS sendiri. Deklarasi berfungsi untuk memberikan style kepada selector sesuai dengan parameter dari value yang telah disediakan.

20 26 Gambar 2.5 Contoh Deklarasi beserta selector, property dan value-nya Gambar 2.6 Contoh Penggunaan Syntax CSS 2.8 Sublime Text 2 Sublime Text 2 adalah sebuah code editor bagi para Developers. Masih banyak code editor selain Sublime Text 2 seperti Notepad++, Aptana Studio, Komodo, BlueFish, dan masih banyak lagi yang lainnya.