Aplikasi Ortu Jj 2

5

Bab 2 Landasan Teori 2.1. Pengertian Internet Internet berasal dari kata Interconnection Networking yang mempunyai arti hubungan komputer dengan berbagai tipe yang membentuk sistem jaringan yang mencakup seluruh dunia ( jaringan komputer global ) dengan melalui jalur telekomunikasi seperti telepon, radio link, satelit dan lainnya. Dalam mengatur integrasi dan komunikasi jaringan komputer ini digunakan protokol yaitu TCP / IP. TCP ( Transmission Control Protocol ) bertugas memastikan bahwa semua hubungan bekerja dengan benar, sedangkan IP ( Internet Protocol ) yang mentransmisikan data dari satu komputer ke komputer lain. TPC / IP secara umum berfungsi memilih rute terbaik transmisi data, memilih rute alternatif jika suatu rute tidak dapat di gunakan, mengatur dan mengirimkan

paket-paket

pengiriman

data.

Untuk dapat ikut serta menggunakan fasilitas Internet, biasanya Anda harus berlangganan ke salah satu ISP ( Internet Service Provider ) yang ada di kota Anda. ISP ini biasanya disebut penyelenggara jasa internet ataupun Anda dapat menggunakan fasilitas dari Telkom yakni Telkomnet Instan. Dengan memanfaatkan internet, pemakaian komputer di seluruh dunia dimungkinkan untuk saling berkomunikasi dan pemakaian bersama informasi dengan cara saling kirim e-mail, menghubungkan ke komputer lain, mengirim dan menerima file, membahas topik tertentu pada newsgroup dan lain – lain. 2.2 World Wide Web (WWW) World Wide Web (WWW), lebih dikenal dengan web merupakan salah satu layanan yang didapat oleh pemakai computer yang terhubung ke internet.

6

Web yang pada awalnya adalah ruang informasi dalam internet, dengan mengunakaan teknologi hypertext, pemakai dituntun untuk menemukan informasi dengan mengikuti link yang disediakan dalam dokumen web yang akan di tampilkan dalam browser web. Kini internet identik dengan web, karena kepopuleran web sebagai standar interface pada layanan – layanan yang ada di internet, dari awalnya sebagai penyedia informasi, kini digunakan juga untuk komunikasi seperti dengan email, chating, bahkan melakukan transaksi bisnis (commerce). WWW mengembangkan teknologi yang dapat dioperasikan pada platform manapun, membawa web mencapai potensi yang utuh sebagai suatu forum informasi,

commerce,

komunikasi,

dan

perjanjian

bersama

(collective

understanding). Cara Kerja World Wide Web •

Informasi web disimpan dalam dokumen yang disebut web pages

•

Web page adalah file-file yang disimpan dalam komputer yang disebut dengan web server

•

Komputer-komputer membaca web page disebut sebagai web client

•

Web clien menampilkan page dalam menggunakan program yang disebut dengan web browser

2.2.1 Istilah – istilah dalam internet Web; World Wide Web Protokol; secara definisi adalah standar pemrosesan informasi yang diterima secara umum. Protokol TCP/IP merupakan protocol yang digunakan untuk komunikasi dalam internet. URL; Universal Resource Locator; URL adalah konsep nama file standar yang diperluas dengan jaringannya. Nama file ini tidak hanya menunjukan direktori dan nama filenya, tetapi juga nama mesinnya dalam jaringan.

7

URL dapat disediakan denga berbagai metoda , dan bisa jadi bukan sekedar file, karena URL dapat menunjukkan query-query, dokumen yang disimpan dalam database, hasil dari suatu perintah finger atau archie , atau apapun yang berkaitan denga data hasil proses. Surfing; Kegiatan menelusuri dan mencari informasi dalam internet melalui layanan informasi web. Homepage Homepage adalah halaman pembuka dari sekian banyak web page yang terdapat pada suatu website. Halaman pertama ini berisi tentang apa dan siapa, dari perusahaan atau organisasi mana pemilik website tersebut, dan pada halaman pertama ini juga sering memiliki link–link yang akan membawa dari satu halaman ke halaman lainnya dari sebuah situs web. Browser Setiap kali membuat web site maka kita perlu melihat bagaimana hasil dari design web yang telah kita buat. Apakah sesuai dengan yang kita inginkan atau tidak?. Oleh karena itu kita butuh browser yang berfungsi untuk melihat hasil kerja kita. Secara default browser yang akan aktif pada program ini yaitu Internet Explorer, akan tetapi kita sebenarnya juga dapat menggunakan browser lainnya seperti Netscape Navigator ataupun internet Explorer dan kita dapat memilihnya sesuai dengan browser yang ingin kita aktifkan atau pakai. 2.3 Hyper Text Markup Language ( HTML) Dokumen HTML adalah file teks murni yang dapat dibuat dengan text editor sembarang. Dokumen ini dikenal sebagai web page. Dokumen html merupakan dokumen yang disajukan dalam browser web surfer, dokumen ini umumnya berisi informasi ataupun interface di dalam internet. Ada dua cara untuk membuat web page: dengan HTML editor atau dengan editor text biasa ( misalnya notepad ).

8

Format HTML Secara umum format tag HTML tersebut dapat dituliskan sebagai berikut: Teks yang akan dipengaruhi oleh tag Sebagai contoh kalau kita akan membuat tulisan dalam format tebal maka yang harus kita tuliskan dalam file HTML adalah: Tulisan yang tercetak tebal Tanda slash (/) menunjukkan akhir dari suatu tag, akan tetapi ada juga beberapa tag HTML yang tidak memerlukan pasangan akhirannya ini. Tag yang paling dasar yang digunakan dalam file HTML adalah dan . Kedua tag ini berfungsi untuk mendefinisikan bahwa teks yang terdapat di antara kedua tag tersebut adalah dalam format HTML. Teks Untuk mendefinisikan head, kita dapat menambahkan tag dan setelah penggunaan tag sedemikian hingga struktur page menjadi : Sedangkan bagian body adalah tempat dimana kita dapat menempatkan teks dan berbagai aksesori pendukung lainnya yang akan ditampilkan pada web page. Bagian ini dapat didefinisikan dengan meletakkan tag dan di antara teks yang akan kita tampilkan. Kedua tag ini diletakkan sesudah tag , sehingga struktur dasar sebuah page dapat dituliskan sebagai :

9

Untuk mendefinisikan judul page (title) maka kita dapat melakukannya dengan meletakkan naskah judul di antara tag <TITLE> dan . Judul ini akan ditampilkan pada title bar web brower Misalkan kita akan membuat sebuah page dengan judul "Latihan HTML" maka kita harus menambahkan: <TITLE>Latihan HTML Perhatikan bahwa tag <TITLE> dan ini harus diletakkan pada bagian head, sehingga dokumen HTML dasar kita menjadi: <TITLE>Latihan HTML Teks yang akan ditampilkan pada bagian body Pada file HTML, karakter carriage returns (Enter) diabaikan, sehingga untuk membuat atau mendefinisikan naskah dalam bentuk paragraf harus ditambahkan tag khusus yakni

. Sebagai contoh kita dapat menampilkan beberapa paragraf sekaligus dalam satu dokumen HTML. <TITLE>Latihan HTML Teks yang akan ditampilkan pada bagian body

Paragraf satu

Paragraf dua

10

.

2.4 Pengenalan Macromedia Dreamwaver 8.0 Dreamweaver merupakan salah satu software dari kelompok macromeia yang banyak digunakan untuk mendesain situs web. Adapun macromedia dreamweaver itu sendiri adalah sebuah editor HTML professional yang berfungsi untuk mendesain secara visual dan mengelola situs web maupun halaman web. 2.4.1 Ruang Kerja Dreamweaver 8.0 Ketika anda memulai Dreamweaver tanpa membuka sebuah dokumen, maka akan tampil halaman awal lembar kerja dreamweaver. Halaman awal ini memudahkan dalam mengakses tutorial Dreamweaver, memilih file yang terbuka, membuat halaman baru.

Selanjutnya akan muncul Ruang Kerja Dreamweaver 8.0. Perhatikan Gambar di bawah ini:

11

Panels group

Document toolbar Insert Bar

Document Window

Coding Toolbar

Ruler Files Panel

Tag Selector

Properties Inspector

Status bar, Hand Tool , dan Zoom

 Panels Group, kumpulan panel yang saling berkaitan satu sama lainnya ynag dikelompokkan dibawah satu judul.  Document Window, berfungsi menampilkan dimana Anda bekerja sekarang.  Insert Bar, berisi tombol-tombol untuk menyisipkan berbagai macam objek seperti image, table, dan frame ke dalam document.  Document Toolbar, berisi tombol-tombol dan menu pop-up yang menyediakan tampilan berbeda dari document Window, misalnya Code, Split, atau Desain.  Coding Toolbar, berisi tombol-tombol yang digunakan untuk mempermudah pekerjaan pada jendela Code.

12

 Tag Selector, berfungsi menampilkan hirarki tag di sekitar pilihan yang aktif pada desain view.  Property Inspector, digunakan untuk melihat dan mengubah berbagai property objek yang terpilih  Status Bar, Hand Tool, dan Zoom, menampilkan status pekerjaan Anda dan mengatur jendela desain.  Ruler, Mempermudah pengukuran secara akurat.  Files Panel, digunakan untuk mengatur file-file dan folder-folder yang membentuk situs web. 2.4.2 Komponen Kerja Dreamwaever 8.0 2.4.2.1 Menu Utama Sistem menu pada Dreamwaever 8 sangat sederhana dan mudah untuk dipahami karena hamper sebagian besar fungsi menu terdapat juga dalm panel.  Menu File dan Edit Berisi menu item standar untuk menu File dan Edit. Menu file berisi perintah untuk menampilkan atau memperlakukan document baru. Seperti Peview in Browser dan Print Code. Menu Edit berisikan perintah untuk pemilihan seperti Select Parent Tag, serta Paint dan Replace.  Menu View Berisi perintah untuk menampilkan beberapa macam tampilan dari dokumen anda (seperti desain view atau code) selain itu menu ini menampilkan dan menyembunyikan beberapa elemen halaman, tomboltombol Dreamweavewr dan toolbar  Menu Insert

13

Berisi alternative baris insert untuk menyisipka objek di dalam dokumen.  Menu Modify Berfungsi melakukan perubahan properti pada item atau halaman terpilih. Anda dapat melakukan pengeditan atribut-atribut tag, mengganti table dan elemen table, dan bermacam bentuk aksi untuk item library dan template.  Menu Text Berfungsi mempermudah Anda dalam melakukan format text.  Menu Commands Berisi akses ke beberapa peritah, format kode yang sesuai dengan format pilihan Anda, membuat foto album, dan melakukan pengeditan gambar dengan Macromedia fireworks.  Menu Site Berisi item menu untuk menola situs dan melakukan upload dan download file.  Menu Window Menyediakan akses ke seluruh panel, inspector, dan jendela di dalam Dreamwaever.  Menu Help Menyediakan Akses untuk membuka lembar kerja Help yang membantu penggunaan Dreamwaever.

14

2.4.2.2 Toolbar Toolbar dreamweaver terdapat button-button yang dapat anda pilih dalam menampilkan dokumen anda secara cepat : Code (HTML), desain, dan gabungan keduanya yaitu tampilan secara HTML dan desain. Toolbar juga menampilkan button-button perintah yang terdapat pada sebelah kanan nama dokumen.

Code and Desain Code view

•

File management

Referesh site list

Document title desain view

Validate Markup

Preview Browser

View option

View aids

Untuk menampilkan dan menyembunyikan Toolbar, pilih menu View > Toolbar. Untuk tampilan dokumen secara kode atau HTML , klik button Code View pada toolbar.

•

Disini anda dapat mengedit atau membuat halaman web anda secara HTML

Untuk tampilan dokumen secara kode dan desain, klik button

Code & Design View. •

Untuk tampilan dokumen secara desain, klik button Design View. Disini anda bisa mengedit atau membuat halaman web anda secara visual.

•

Untuk merubah nama dokumen, klik pada title lalu rubah nama dokumen sesuai dengan keinginan anda. Anda dapat melihat halaman web secara browser (Internet Explorer) dengan mengklik button Preview Browser.

15

•

Pada

View Options, anda dapat memilih tampilan desain yang anda

inginkan , contoh : anda dapat menambahkan tampilan Rulers(garis ukuran) untuk memudahkan anda dalam mendesain sebuah web. •

No Browser Check Error, Untuk melakukan pengecekan kesalahan pada dokunen Web.

•

DocumentTitle, Untuk melakukan judul pada dokumen Web.

•

Validate Markup, Untuk mengesahkan dokumen yang sedang aktif atau pekerjaan yang terpilih.

•

File Management, Untuk proses upload dan download file.

•

Referesh Site List, Untuk melakukan pembaharuan terhadap daftar isi situs Anda.

•

Visual Options, Untuk menolong anda menggunakan tampilan yang berbeda untuk mendesain halaman anda.

2.4.2.3 Property Inspector Pada Property inspector anda dapat memeriksa dan mengedit elemen yang ada pada halaman web. (Elemen itu adalah object atau teks). Untuk menampilkan atau menyembunyikan Property inspector, pilih menu Window > Properties. Selama ini anda mengedit dan membuat teks atau mengedit object didalam dokumen pada tampilan window, dengan Property inspector anda dapat mengeditnya denga cepat.(seperti contohnya : anda ingin merubah jenis fonts teks yang sudah anda buat dengan shadding teks lalu mengganti jenis font, atau pada object anda dapat merubah alamat URL atau link yang dituju). Tampilan Property inspector sangat bervariasi tergantung elemen yang dipilih. Untuk informasi properties yang spesifik, pilih elemen yang diinginkan pada dokumen window lalu klik icon Help pada pojok kanan atas daripada Property inspector.

16

2.5 Konsep Penggunaan PHP PHP adalah salah satu bahasa pemrograman di Internet. PHP bersifat cepat, gratis dan murah ( gratis ), selain itu PHP mendukung penggunaan database seperti MySQL, PostgreSQL, mSQL, Oracle etc. Untuk dapat menjalankan PHP melalui browser, maka anda diharuskan terlebih dahulu menginstall web server ( misalnya XAMPP) lalu menginstall PHP, sedangkan untuk menjalankan MySQL anda tidak perlu menginstall web server. Sintaks – sintaks dalam PHP banyak yang sama dengan C++. 2.5.1 Dasar PHP PHP (akronim dari PHP Hypertext Preprocessor) yang merupakan bahasa pemrogramman berbasis web yang memiliki kemampuan untuk memproses data dinamis. PHP dikatakan sebagai sebuah server-side embedded script language artinya sintaks-sintaks dan perintah yang kita berikan akan sepenuhnya dijalankan oleh server tetapi disertakan pada halaman HTML biasa. Aplikasi-aplikasi yang dibangun oleh PHP pada umumnya akan memberikan hasil pada web browser, tetapi prosesnya secara keseluruhan dijalankan di server. Pada prinsipnya server akan bekerja apabila ada permintaan dari client. Dalam hal ini client menggunakan kode-kode PHP untuk mengirimkan permintaan ke server. Ketika menggunakan PHP sebagai server-side embedded script language maka server akan melakukan hal-hal sebagai berikut : Membaca permintaan dari client/browser, Mencari halaman/page di server, Melakukan instruksi yang diberikan oleh PHP untuk melakukan modifikasi pada halaman/page. kembali halaman tersebut kepada client melalui internet atau intranet.

Mengirim

17

PHP dijalankan dalam file berekstensi .php, .php3 atau .phtml, itu tergantung dengan settingan PHP, tetapi secara umum ekstensi file PHP adalah .php. •

Sintaks PHP Kode PHP menyatu dengan tag – tag HTML dalam satu file. Kode PHP

diawali dengan tag . Contoh : 2.5.2 Tipe Data, Variable, Konstanta 1.

Tipe Data PHP mengenal 5 tipe data yaitu integer, floating point, string, array dan

object. Penggunaan tipe data tidak secara ekspilisit di deklarasikan . Contoh : ”; $var = “dua ribu dua”; // var sebagai string print “Sekarang tahun $var.
”; $var = 2002.5; // var sebagai bilangan bulat / float print “Tahun $var, ada atau nggak ?”; ?>

18

divisi = $str; } } $hme = new himp; print $hme->divisi; print "
"; $hme->ubah("Divisi Komputer HME ITB"); print $hme->divisi; ?> 2.

Variabel Digunakan dalam program untuk menyimpan nilai yang berubah – ubah.

Variable dalam PHP selalu ditulis dengan awalan $. Struktur penulisan dalam PHP, sama seperti dalam C++, yaitu setiap pernyataan diakhiri oleh semicolon ( ; ) dan bersifat case sensitive untuk penulisan nama variabel. Contoh : ”; print “$NAMA variable menggunakan huruf besar.”; ?>

19

 Konstanta Menyatakan nilai yang tetap dalam Program. Pada PHP dikenal sejumlah karakter yang menggunakan penulisan secara khusus yang di dahului dengan symbol backslash(\).Contoh \n artinya newline.

2.5.3

Stuktur Pemilihan

1.

Pernyataan If

Pernyataan if dipakai untuk mengambil suatu tindakan atau keputusan. PHP mempunyai tiga macam bentuk IF, yaitu: •

If saja Bentuk penulisan: if(ekspresi) { Pernyataan }

•

if – else Bentuk penulisan: if (ekspresi) {

Pernyataan 1 }

else {

Pernyataan 2 }

20

•

if – elseif Bermanfaat untuk pengambilan keputusan yang melibatkan banyak alternative. Bentuk penulisan: if (ekspresi) {

Pernyataan 1 }

elseif (ekspresi) {

Pernyataan 2 }

else { 2.

Pernyataan 3 }

Pernyataan Switch

Bermanfaat untuk pengambilan keputusan yang melibatkan banyak alternative. Bentuk penulisan :

21

2.5.4

Stuktur Pengulangan

1.

Pernyataan While

Bentuk Penulisan: while (ekspresi) { Pernyataan } Pernyataan while akan memeriksa nilai ekspresi terlebih dahulu. Jika benar maka pernyataan yang ada dalam { } akan dijalankan dan kemudian eksapresi diulang lagi sampai bernilai salah. 2.

Pernyataan Do – While

Bentuk Penulisan: do { Pernyataan } while (ekspresi); Pengulangan akan berakhir jika ekspresi yang diuji bernilai salah. 3.

Pernyataan For

Bentuk penulisan: for (ekspresi1;ekspresi2;ekspresi3) { Pernyataan } •

Ekspresi1: nilai awal variable yang digunakan.

22

2.6

•

Ekspresi2: kondisi untuk menentukan perulangan.

•

Ekspresi3: mengatur nilai variable yang digunakan ekspresi1. Sturuktur Navigasi Penjejakan termasuk struktur terpenting dalam pembuatan suatu

multimedia dan gambarnya harus sudah ada pada tahap Perencanaan. Peta penjejakan merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat membantu mengorganisasikan seluruh elemen multimedia dengan pemberian perintah dan pesan. Peta penjejakan juga merupakan kemudahan dalam menganalisa keinteraktifan seluruh objek dan bagaimana pengaruh keinteraktifannya terhadap pengguna. Peta penjejakan mempunyai beberapa ciri khas yang dapat digolongkan menurut kebutuhan dalam objek, kemudahan pemakai, keinteraktifannya, dan kemudahan membuatnya yang berpengaruh

terhadap

waktu

pembuatannya.

Beberapa

dasar

struktur

pembuatannya adalah : 1. Non linier

Gambar.2.21 . Struktur Navigasi Non Linier Struktur ini merupakan pengembangan dari struktur linier, perpindahan antar halaman secara langsung diperkenalkan atau membentuk suatu percabangan.

23

2. Linier

Gambar.2.22. Struktur Navigasi Linier Struktur yang mempunyai satu rangkaian cerita yang berurut antara satu halaman dengan halaman lainnya terhubung secara seri. Perpindahan halaman secara satu per satu, misalnya dari halaman pertama menuju halaman tiga harus melalui halaman dua terlebih dahulu. Struktur ini biasa digunakan untuk menampilkan unsur keindahan dan data sebagai Informasi. 3. Hierarchical

Gambar.2.23. struktur Navigasi Hierarchical Struktur ini dalam menampilkan data membentuk suatu percabangan yang berdasarkan kriteria tertentu. Tampilan data terdiri dari Master Page (Halaman Utama) dan Slave Page (Halaman Pendukung).

24

4. Composite

Gambar.2.24. Struktur Navigasi composite Struktur ini merupakan gabungan dari struktur Linier, Non Linier dan Hierarchical. Banyak digunakan untuk pemakaian interaksi yang tinggi. 2.7

MySQL MySQL adalah salah satu jenis database server yang sangat terkenal,

disebabkan MySQL menggunakan SQL sebagai dasar untuk mengakses database. MySQL termasuk ke dalam RDBMS ( Relational Database Management System ). Yang sangat popular dikalangan pemrograman web, terutama dikalangan linux.

2.7.1 SQL (Struktur Query Language) SQL bukan software atau bahasa pemrograman. SQL adalah bahasa standar yang digunakan untuk mengolah database. SQL mampu melakukan proses menciptakan database, table, perubahan struktur table, memanajemen sekuritas hak akses, melakukan update data dan sebagainya.

25

1.

Perintah untuk mengelola database, dikelompokkan menjadi : •

DDL (Data Definition Language) Membuat dan mendefinisikan database dan struktur datanya. Contoh : create database, create table, drop table, drop view, alter table.

•

DML (Data Manipulation Language) Melakukan atau penggolahan data yang ada dalam database. Contoh : insert, select, update, delete.

•

DCL (Data Control Language) Melakukan pendefinisian pemakai yang boleh mengakses database dan apa saja privilagenya. Contoh : revoke, grant, commit, roolback.

2.7.2

Integrating PHP dan MySQL Dalam mengintegrasikan PHP dengan MySQL. PHP menyediakan fungsi-

fungsi untuk melakukan koneksi ke MySQL, mengambil data, mengupdate data, dan operasi database lainnya. 1.

Koneksi Databases

Untuk dapat mengakses data yang ada di database program PHP, untuk dapat melakukan koneksi dengan database MySQL terlebih dahulu. Bentuk : Mysql_connect(Nama Host, Nama User, Password); Keterangan : •

Nama_Host adalah lokasi dimana MySQL dipublikasikan.

•

Nama_User adalah String denga isi data nama user yang terdaftar dalam MySQL yang digunakan untuk mengakses data pada MySQL

•

Password adalh string yang berisikan password yang digunakan untuk mengakses databases

26

2.

Membuat Database

Untuk membuat website yang dinamis, pertama kali yang perlu disiapkan adalah sebuah databases sebagai tempat untuk menyimpan data. Bentuk : Mysql_create_db(nama); Keterangan : • 3.

Nama adalah string yang berisikan kata yang akan menjadi nama database. Membuat Tabel

Tabel dibuat didalam database yang berfungsi untuk mengatur dan menyimpan informasi Bentuk : Mysql_query(variable_hasil) Keterangan : •

Variable_hasil adalah variable yang bernilai hasil dari pembacaan data dalm database

4.

Memasukan Data

Untuk memasukkan data dalam database, gunakan bentuk penulisan program berikut : Insert into nama_tabel (field1,field2,..) values (‘data1’,’data2’,..); Keterangan : •

Nama_tabel : names table yang akan diakses dan ditambah

•

Field1, field2 : nama kolom yang ada dalam table dan dapat diisi data pada tiap-tiap fieldnya.

27

•

Data1, data2 : string yang berisikan data dan akan dimasukan ke dalam field-field tertentu.

5.

Mencari dan menampilkan data

Bentuk : Select field1, field2, .. from nama_tabel where syarat1, syarat2, .. order by nama_field. Keterangan : •

Nama_tabel : names table yang akan diakses dan ditambah

•

Field1, field2 : nama kolom yang ada diakses

•

Syarat1, syarat2 : string yang berisikan syarat data

•

Nama_field : field yang menjadi dasar pengurutan.

6.

Mengubah Data

Bentuk : Update nama_tabel Set field=nilai_baru, field2=nama_baru,.. where syarat1, syarat2,.. Keterangan : •

Nama_tabel : names table yang akan diakses dan ditambah

•

Field1, field2 : nama kolom yang akan diubah

•

Nilai_baru : data dalam bentuk string atau variable yang dijadikan data pengubah data yang lama.

•

Syarat : ketentuan yang harus dipenuhi dalam pengubah data..