MODUL PRAKTIKUM WEB PROGRAMMING 1. Disusun Oleh Tim Penyusun Modul Manajemen Informatika

MODUL PRAKTIKUM

WEB PROGRAMMING 1

Disusun Oleh Tim Penyusun Modul Manajemen Informatika

Akademik Manajemen Informatika dan Komputer Bina Sarana Informatika Jakarta 2013

Web Programming 1 AMIK Bina Sarana Informatika

BAB I KONSEP DASAR WEB

1.1.

Konsep Dasar Pemrograman Web

1.

World Wide Web (WWW/Web) World Wide Web (WWW/Web) “Suatu ruang informasi di mana sumber-

sumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI)” Web Agents: Orang atau perangkat lunak yang mengambil peran di dalam ruang informasi (Web) a. User Agent; user b. Software Agent; Servers, proxies, spiders, browsers, dan multimedia players. 2.

Uniform Resource Identifier (URI) Uniform Resource Identifier (URI) Terdiri atas string karakter yang

digunakan untuk identifikasi atau memberi nama suatu resource (sumberdaya) di internet. Identifikasi tersebut memungkinkan interaksi dengan representasi dari resouce melalui network (jaringan) dengan menggunakan protokol tertentu.

2


3.

Hypertext Transfer Protocol (HTTP) Protokol yang dipergunakan untuk melakukan transfer dokumen dalam World

Wide Web (WWW). Protokol ini adalah protokol ringan, tidak berstatus dan generik yang dapat dipergunakan berbagai macam tipe dokumen. Pengembangan HTTP dikoordinasi oleh World Wide Web Consortium (W3C) dan grup bekerja Internet Engineering Task Force (IETF), bekerja dalam publikasi satu seri RFC, yang paling terkenal RFC 2616, yang menjelaskan HTTP/1,1, versti HTTP yang umum digunakan sekarang ini. HTTP adalah sebuah atandar request/response antara sebuah client dan sebuah server. Sebuah Client HTTP seperti web browser, biasanya memulai permintaan dengan membuat hubungan TCP/IP ke sebuah port tertentu di host (biasanya port 80).

3


Sebuah server HTTP yang mendengarkan di port tersebut menunggu client mengirim kode permintaan (request), seperti "GET / HTTP/1.1" (yang akan meminta halaman yang sudah ditentukan), diikuti dengan pesan MIME yang memiliki beberapa informasi header code yang menjelaskan aspek dari permintaan tersebut, diikut dengan body dari data tertentu. Begitu menerima kode permintaan (dan pesan, bila ada), server mengirim kembali kode jawaban, seperti " HTTP/1.1 200 OK ", dan sebuah pesan yang diminta, atau sebuah pesan error atau pesan lainnya. 4.

Perangkat Lunak Web Server Web Server adalah sebuah perangkat lunak server yang berfungsi menerima

permintaan HTTP atau HTTPS dari Client yang dikenal dengan web browser dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML. Server web yang terkenal diantaranya adalah: a. Apache, web server antar platform 1) XAMPP 2) PHPTriad; discontinued 3) Apache2Triad b. Internet Information Service (IIS), hanya dapat berjalan di sistem operasi MS Windows

1.2.

Struktur Navigasi Navigasi termasuk struktur terpenting dalam pembuatan suatu aplikasi

multimedia dan gambarnya harus sudah ada pada tahap perancangan. Peta navigasi merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan

4


dapat membantu mengorganisasikan seluruh elemen aplikasi multimedia dengan pemberian perintah dan pesan. Peta navigasi juga memberikan kemudahan dalam menganalisa keinteraktifan seluruh objek dalam aplikasi multimedia dan bagaimana pengaruh keinteraktifannya terhadap pengguna. Ada 4 macam bentuk dasar dari peta navigasi yang biasa digunakan dalam proses pembuatan aplikasi multimedia, yaitu: 1.

Struktur Navigasi Linier Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang berurut,

yang menampilkan satu demi satu tampilan layar secara berurut menurut urutannya. Tampilan yang dapat ditampilkan pada sruktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya.

Gambar 1.1. Struktur Navigasi Linier Contoh :

5


2.

Struktur Navigasi Hirarki Struktur navigasi hirarki biasa disebut struktur bercabang, merupakan suatu

struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai Master Page (halaman utama pertama), halaman utama ini mempunyai halaman percabangan yang disebut Slave Page (halaman pendukung). Jika salah satu halaman pendukung dipilih atau diaktifkan, maka tampilan tersebut akan bernama Master Page (halaman utama kedua), dan seterusnya. Pada struktur navigasi ini tidak diperkenankan adanya tampilan secara linier.

Gambar 1.2. Struktur Navigasi Hirarki Contoh :

6


3.

Struktur Navigasi Non-Linier Struktur navigasi non-linier atau struktur tidak berurut merupakan

pengembangan

dari

struktur

navigasi

linier.

Pada

struktur

ini diperkenankan membuat navigasi bercabang. Percabangan yang dibuat pada struktur nonlinier ini berbeda dengan percabangan pada struktur hirarki, karena pada percabangan nonlinier ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama yaitu tidak ada Master Page dan Slave Page.

Gambar 1.3. Struktur Navigasi Non-Linier Contoh :

4.

Struktur Navigasi Campuran Struktur navigasi campuran merupakan gabungan dari ketiga struktur

sebelumnya yaitu linier, non-linier dan hirarki. Struktur navigasi ini juga biasa disebut dengan struktur navigasi bebas. Struktur navigasi ini banyak digunakan dalam

7


pembuatan website karena struktur ini dapat digunakan dalam pembuatan website sehingga dapat memberikan ke-interaksian yang lebih tinggi.

Gambar 1.4. Struktur Navigasi Campuran Contoh :

8


BAB II PENGENALAN HTML

2.1

Pengertian HTML (Hypertext Markup Language) Hypertext Markup Language (HTML) adalah sebuah bahasa untuk

menampilkan konten di web. HTML sendiri adalah bahasa pemrograman yang bebas, artinya tidak dimiliki oleh siapapun, pengembangannya dilakukan oleh banyak orang di banyak Negara dan bias dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara global. Sebuah dokumen HTML sendiri adalah dokumen teks yang dapat diedit oleh editor teks apapun. Dokumen HTML punya beberapa elemen yang dikelilingi oleh tag-teks yang dimulai dengan symbol < dan berakhir dengan sebuah symbol >. Editor teks yang digunakan oleh penyusun adalah software PHP Coder dan XAMPP Versi 1.8.1 untuk web servernya dengan bahasa pemrograman PHP Versi 5.

Gambar II.1. Tampilan Awal PHP Coder

9


2.2.

Struktur Dasar HTML Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen dan

tag akhir. Tag berakhir termasuksimbol / diikuti oleh tipe elemen, misalnya . Sebuah elemen HTML dapat bersarang di dalam elemen lainnya. Sebuah dokumen HTML standar terlihat seperti ini :

Keterangan : 1. Tag HTML secara default dimulai dari dan diakhiri dengan . 2. Tag … merupakan tag kepala sebelum badan. Tag kepala ini akan terlebih dulu dieksekusi sebelum tag badan. Di dalam tag ini berisi tag <META> dan <TITLE>. Tag <META> merupakan informasi atau header suatu dokumen HTML. Atribut yang dimiliki oleh tag ini antara lain: a. HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen HTML secara otomatis dalam jangka waktu tertentu. b. CONTENT, atribut ini berisi informasi tentang isi document HTML yang akan dipanggil. c. NAME, atribut ini merupakan identifikasi dari meta itu sendiri. Tag <META> dalam suatu document HTML boleh ada maupun tidak.

10


3. Tag <TITLE> … adalah tag judul. Sebaiknya setiap halaman web memiliki judul, dan judul tersebut dituliskan di dalam <TITLE> … . Judul ini akan muncul dalam titlebar dari browser. 4. Tag … adalah tag berisi content dari suatu halaman web.

Contoh penggunaan script HTML Buat lembar baru pada PHP Coder, kemudian ketikkan perintah di bawah ini. Simpan dengan nama Contoh01.php

Judul Web Perintah dibuat di antara dan

Kemudian simpan file di atas di dalam folder c:\XAMPP\htdocs\ buat folder baru untuk menyimpan file di dalam folder htdocs. Simpan file dengan nama contoh01.php. Pembuatan nama file pada saat penyimpanan harus diakhiri dengan extention “.php” Untuk melihat hasil dari file di atas dapat menggunakan browser Mozilla, google chrome, internet explorer atau jenis browser lain. Ketikkan pada address bar “Localhost\Nama Folder Penyimpanan\”, kemudian pilih file contoh01.php Lihat gambar di bawah ini :

11


Ketikkan localhost kemudian nama folder penyimpanan file

Klik di contoh01.php

Hasilnya :

Kode-kode dalam HTML biasanya disebut TAG. Tag adalah sesuatu yang digunakan untuk menandai elemen-elemen dalam suatu dokumen HTML. Tag dalam HTML terdiri dari tanda lebih kecil ( < ), tanda lebih besar ( > ), dan garismiring ( / ). Biasanya Tag dituliskan secara berpasangan, misanya
dan
. Tag yang tidak menggunakan garis miring ( / ) adalah Tag pembuka atau awal elemen. Sedangkan yang Tag yang mengandung garis miring ( / ) adalah penutup elemen atau akhir elemen. Namun, ada juga Tag yang dalam pemakaiannya tidak berpasangan, diantaranya adalah : a.

Tag untuk ganti paragraph yaitu

b.

Tag untuk ganti baris atau line break yaitu

c.

Tag untuk garis datar yaitu

12

Web Programming 1 AMIK Bina Sarana Informatika d.

Tag list item yaitu
Untuk tag yang tidak berpasangan diatas, sebaiknya tetap ditulis

menggunakan pasangannya. Hal ini dilakukan untuk mengantisipasi standar rekomendasi HTML kedepannya. Penulisan untuk semua Tag bebas, maksudnya kita bisa menggunakan huruf besar, huruf kecil, bahkan dicampur ( tidak case sensitive ). Tapi untuk mengantisipasi standar penulisan Tag, sebaiknya kita menggunakan huruf kecil semua. Jenis – jenis tag dalam HTML :

13


14


Contoh script penggunaan Tag HTML Buat lembar baru pada PHP Coder, kemudian ketikkan perintah di bawah ini. Simpan dengan nama Contoh02.php

15


Simpan dengan nama contoh02.php Hasil Tampilan

2.3.

Pembuatan Tabel Menggunakan HTML Tabel penting peranannya dalam halaman Web, selain untuk menampilkan

teks atau gambar dalam format lajur dan kolom bias juga menggunakan tabel untuk membantu me-layout tampilan halaman. Tabel merupakan sebuah kotak yang terdiri atas baris/row dan kolom.column. Untuk membuat tabel, anda menggunakan tag dan menutupnya dengan tag
. Anda bisa juga menambahkan atribut lain di tag pembuka. Misalnya menentukan warna, border, dan sebagainya. Di dalam tag
ada beberapa tag lain yang perlu dipahami, yaitu :

16


a.

Tag Artinya tag untuk menuliskan baris biasa di tabel. TR singkatan dari Table Row.

b.

Tag . TD singkatan dari Table Data.

c.

Tag

Artinya tag untuk menuliskan kotak di dalam baris, makanya tag ada di dalam tag
Artinya tag untuk menuliskan kotak biasa seperti , namun untuk header tabel. TH singkatan dari Table Header.

Contoh script pembuatan tabel Buat lembar baru pada PHP Coder, kemudian ketikkan perintah di bawah ini. Simpan dengan nama Contoh03.php

17


Jika dilihat di browser, maka terlihat sebagai berikut :

Latihan : Buat script HTML untuk bentuk tampilan di bawah ini :

18


19


BAB III PENGENALAN PHP

3.1.

Pengertian PHP (PHP Hypertext Preprocessor) PHP atau PHP Hypertext Prepocessor adalah sebuah bahasa pemrograman

web berbasis server (server-side) yang mampu mem-parsing kode php dari kode web dengan ekstensi .php, sehingga menghasilkan tampilan website yang dinamis di sisi client (browser). Dengan PHP, anda bisa menjadikan halaman HTML menjadi lebih powerful dan bisa dipakai sebagai aplikasi lengkap, misalnya untuk beragam aplikasi cloud computing. PHP adalah bahasa script yang sangat cocok untuk pengembangan web dan dapat dimasukkan ke dalam HTML. PHP awalnya dikembangkan oleh seorang programmer bernama Rasmus Lerdrof pada tahun 1995, namun semenjak itu selalu dikembangkan oleh kelompokindependen yang disebut Group PHP dan Kelompok ini juga yang mendefinisikan standar de facto untuk PHP karena tidak ada spesifikasi formal. Saat ini pengembangannya dipimpin oleh duo maut, Andi Gutmans dan Zeev Suraski. Yang menyebabkan PHP banyak dipakai oleh banyak orang adalah karena PHP adalah perangkat lunak bebas (Open Source) yang dirilis di bawah lisensi PHP. Artinya untuk menggunakan bahasa pemrograman ini gratis, bebas, dan tidak terbuka.

20


3.2.

Memasukkan Kode PHP Tidak seperti halaman HTML biasa, kode PHP tidak akan diberikan oleh

server secara langsung ketika ada permintaan dari client (browser), namun melalui pemrosesan dari sisi server, makanya PHP disebut skrip server-side. Kode PHP dimasukkan ke dalam kode HTML dengan cara menyelipkannya di dalam kode HTML. Untuk membedakan kode PHP dengan kode HTML, di depan kode PHP tersebut diberi tag pembuka dan diakhir kode PHP diberi tag penutup. Dengan adanya kode PHP, sebuah halaman web bisa melakukan banyak hal yang dinamis, seperti mengakses database, membuat gambar, membaca dan menulis file, dan sebagainya. Hasil akhir pengolahan kode PHP akan dikembalikan lagi dalam bentuk kode HTML untuk ditampilkan di browser. Ada 4 jenis tag yang bisa digunakan untuk memasukkan kode PHP. Jenis Tag Tag Standar Tag Pendek Tag ASP Tag Script

Tag Pembuka

Tag Penutup ?> ?> %>

Tabel III.1 Jenis-jenis Tag PHP Yang dapat langsung diterapkan disemua platform adalah tag standard dan tag script. Di dalam modul ini bahasa pemrograman yang digunakan adalah PHP Versi 5 sehingga jenis tag yang harus digunakan adalah tag standar. Untuk tag lainnya perlu penyetingan di server oleh administrator server. Contoh Script PHP Buka file baru di PHP Coder. Kemudian ketikkan script seperti di bawah ini :

21


Simpan file dengan nama contoh04.php Untuk melihat hasilnya buka browser masuk ke dalam localhost dan folder penyimpanan. Pilih file contoh04.php maka akan tampil hasilnya :

Contoh04.php merupakan contoh script php yang berdiri sendiri tanpa ada tambahan script yang lain. Perintah echo merupakan perintah yang digunakan untuk mencetak. Script PHP bisa juga digabung dalam tag HTML.

22


BAB IV DASAR-DASAR PHP

4.1.

Variabel Variabel merupakan sebuah istilah yang menyatakan sebuah tempat yang

menampung nilai-nilai tertentu di mana nilai di dalamnya bisa diubah-ubah. Variable penting karena tanpa adanya variable tidak bisa menyimpan nilai tertentu untuk diolah. Variabel ditandai dengan adanya tanda dolar ($) yang kemudian bisa diikuti dengan angka, huruf, dan underscore. Namun variable tidak bisa mengandung spasi. Berikut ini contoh pendefinisian variable. Untuk mendefinisikan variable, hanya perlu menuliskannya maka otomatis variable dikenali oleh PHP. $nama $no_telp $_pekerjaan Variable merupakan tempat untuk menyimpan data dalam tipe tertentu, variable bisa berupa null (belum ada isinya), angka, string, objek, array, Boolean, dan isinya bisa diubah-ubah nantinya.

23


Contoh05.php:

Hasil :

4.2.

Tipe Data Berbeda dengan bahasa pemrograman lain, variable di PHP lebih fleksibel.

Kita tidak perlu mendefinisikan jenisnya ketika mendefinisikan pertama kali. Ada 6 variabel dasar yang dapat diakomodasi di PHP, seperti terlihat di tabel.

24


Tabel IV.1. Jenis-jenis tipe data Tipe Integer Double String Boolean Object Array

Contoh 134 5.1234 “asep” False

Penjelasan Semua angka bukan pecahan Nilai pecahan Kumpulan karakter Salah satu nilai True atau False Sebuah instance dari class Larik

Untuk mengetahui tipe data sebuah variable, kita bisa menggunakan perintah gettype, misalnya : Print gettype ($nama_variabel); Anda juga bisa mengubah jenis variable tertentu dengan perintah : (jenis_variabel) $nama_variabel; Misalnya untuk mengubah variable menjadi string, kita dapat menggunakan perintah: $var_string = (string) $angka; Contoh06.php:

25


Hasil Tampilan :

Latihan Buat script php untuk tampilan di bawah ini. Tentukan variablenya :

4.3.

Konstanta Selain variable, sebuah program umumnya juga memungkinkan adanya

konstanta. Konstanta fungsinya sama seperti variable namun nilainya statis/konstan dan tidak bisa berubah. Cara untuk mendefinisikan konstanta adalah : Define (“NAMA_KONSTANTA”, nilai_konstanta); Setelah didefinisikan, kita dapat langsung menggunakannya dengan mengetikkan nama konstanta tersebut. Nama konstanta umumnya diketik menggunakan huruf besar.

26


4.4.

Komentar Program merupakan kegiatan menuliskan bahasa yang dipahami oleh mesin.

Walaupun bahasa yang digunakan adalah bahasa tingkat tinggi, namun tent masih tidak semudah dipahami oleh bahasa biasa. Untuk itu kita bisa menggunakan komentar. Berikut ini contoh pembuatan komentar di php. //komentar satu baris #ini juga komentar satu baris /*komentar Banyak baris Kode di sini tidak Dieksekus oleh parser */

Contoh script konstanta & komentar. Contoh07.php

Deklarasi komentar Deklarasi konstanta

27


Hasil :

28


BAB V OPERATOR

5.1.

Mengenal Operator Sebuah bahasa pemrograman juga wajib untuk mampu mengolah nilai

operand (variable atau konstanta yang dioperasikan) menggunakan operator, seperti menjumlah, membagi, dan sebagainya. Operator merupakan symbol yang berfungsi untuk melakukan aksi / operasi tertentu terhadap nilai operand yang pada umumnya dari hasil operasi tersebut menghasilkan nilai baru. Sementara operand adalah nilai yang dilibatkan dalam operasi oleh operator.

5.2.

Jenis-Jenis Operator 1. Operator Assignment Operator yang digunakan untuk mengalokasikan nilai tertentu. Operator assignment adalah tanda sama dengan (=). Contoh penggunaannya : $pekerjaan = “Penulis”; Berikut adalah jenis operator assignment di PHP : Operator = += -= *= /= .=

Contoh X=Y X+=Y X-=Y X*=Y X/=Y X.=Y

Artinya X=Y X=X+Y X=X-Y X=X*Y X=X/Y X=X.Y

29


%=

X%=Y

X=X%Y

2. Operator Aritmatika Operator ini digunakan untuk melakukan perhitungan matematika, sebagain berikut : Operator + / * % ++ -

Nama Penambahan Pengurangan Pembagian Perkalian Sisa Pembagian Inkremen Dekremen

Contoh 1+4 1-4 ¼ 1*4 5%2 X=5; X++ X=5; X-

Hasil 5 -3 0.25 4 1 X=6 X=4

3. Operator Perbandingan Operator perbandingan digunakan untuk menghasilkan 2 nilai yang hasil akhirnya adalah nilai Boolean true dan false. Operator ini sangat berguna dalam pemrograman karena bisa menentukan arah pemrograman. Operator perbandingan di PHP adalah : Operator == != > >= < <=

Nama Sama dengan Tidak sama dengan Lebih besar Lebih besar atau sama dengan Lebih kecil Lebih kecil atau sams dengan

30

Contoh 6==6 3!=3 1>5 3>=4 2<4 5<=4

Hasil False False False False True False


Contoh Script PHP Operator Aritmatika Contoh08.php

Hasil :

31


BAB VI PERCABANGAN

6.1.

Statement IF Statement IF merupakan statement yang penting dan pasti terdapat di semua

bahasa pemrograman. Statement ini berguna untuk membuat percabangan berdasarkan kondisi tertentu yang harus dipenuhi. Contoh Script Statement IF Contoh09.php

Hasil :

32


Contoh10.php

Hasil:

6.2.

Statement Switch

Statement untuk pengatur alur program berikutnya adalah switch. Salah satu keuntungan switch adalah ada bisa langsung mengevaluasi satu statement dan memerintahkan aksi dalam jumlah yang lebih banyak.

33


Contoh Script Statement Switch Contoh11.php

Hasil:

34


BAB VII PENGULANGAN

7.1.

Pengertian Pengulangan Proses pengulangan merupakan proses standard dalam untuk menjadi seorang

programmer, karena dari beberapa proses algoritma proses pengulangan sebagai tolak ukur apakah seseorang bisa menjadi programmer yang handal. Proses pengulangan juga dominan dalam logika program, hamper semua program aplikasi yang penting terdapat proses pengulangan.

7.2.

Jenis – Jenis Pengulangan 1. For Pengulangan yang jumlah pencacah yang sudah pasti atau sudah di ketahui. Bentuk Umum : For (nilai awal ; batas pengulangan ; operator increament/decreament)

35


Contoh12.php :

Hasil :

2. While Perulangan yang melakukan pengecekan syarat di awal blok perulangan. Selama syarat bernilai benar, perulangan akan terus berlanjut dan sebaliknya jika syarat bernilai salah perulangan akan dihentikan Bentuk Umum : Nilai awal while (batas pengulangan) { pernyataan ; operator increament/decrement ; }

36


Contoh13.php

Hasil :

37


3. Do While Kebalikan dari for dan while karena do…while melakukan pengecekan terhadap syarat di akhir blok perulangan. Contoh14.php :

Hasil :

38


BAB VIII ARRAY

8.1.

Pengertian Array Sekumpulan data atau dapat juga di artikan pemetaan antara key dan value.

Kumpulan data tersebut dinamakan elemen array. Elemen array tersusun secara index, elemen pertama ber-index 0, elemen kedua berindex 1 dan seterusnya. Bentuk umum : Array (elemen array) 8.2. 8.2.

Membuat Array Sebuah bahsa pemrograman umumnya memiliki variable berjenis array. Array

(dalam bahasa Indonesia kerap ditejermahkan sabagai larik) merupakan variable yang di dalamnya mengandung nilai-nilai lainnya. Contoh Script Pembuatan Array Contoh15.php

39


Hasil :

Contoh16.php

Hasil :

40


Latihan Pembuatan Array : 1.

Buatlah program array dengan menampilkan urutan mahasiswa seperti ini : adel, sausan, triaszada,fifi,umay, ifur, fitria

2.

Tampilkan nama mahasiswa urutan ke-1, ke-7 dan ke- 3

41


BAB IX FUNGSI

9.1.

Pengertian Fungsi Fungsi merupakan modul program yang terdiri dari instruksi-instruksi untuk

tujuan tertentu. Dengan fuungsi pemakai dapat membagi program besar menjadi kecil sehingga memudahkan dalam modifikasi. Bentuk Umum : Function nama fungsi (variabel1,variabel2,…) {statement ; }

Contoh : Hasil :

42

Deklarasi fungsi


Latihan : 1.

Buatlah program dengan menggunakan fungsi dengan tampilan sebagai berikut :

2.

Buat fungsi untuk mencetak judul & garis.

43


BAB X FORM

10.1.

Form Dengan Input Dan Pemrosesan Terpisah Form di HTML dikenal dengan adanya tag
dan ditutup dengan tag

. Di dalam tag pembuka
diikuti dengan atribut action dan method. Action menjelaskan ke halama yang digunakan untuk memproses input, sementara method digunakan untuk mengatur cara mem-parsing konten. Ada 2 method yang biasa digunakan : •

GET : Variabel akan bisa dilihat URL

•

POST : Variabel akan disembunyikan dan tidak terlihat di URL, lebih secure dan cocok untuk memparsing informasi yang penting, seperti password.

Selain itu anda harus juga mengerti sintaks pembuatan form, yang terpenting adalah atribut “name” di masing-masing objek form. Atribut name ini penting karena nantinya digunakan untuk memanggil variable di form lainnya.

44


Contoh Script Pembuatan Form Dengan Input dan Pemrosesan Terpisah Contoh17.php

45


Hasil :

Script di atas mengandung action = tampil09.php yang menjelaskan bahwa kode yang diisikan nantinya akan diproses di form tampil09.php. script di atas menggunakan layout tabel agar tampilan form terlihat rapi. Untuk memproses kita perlu membuat scrip tampil09.php yang harus diperhatikan adalah nama objek – objek form yang akan digunakan untuk mengambil nilai

variable.

Cara

mengambilnya

adalah

dengan

menggunakan

sintaks

$_POST[‘nama_variabel’].” Misalnya untuk mengambil variable yang diisikan di kotak dengan name =”nama”, maka digunakan sintaks $_POST[‘nama’].”.

46


Scipt Tampil Data Tampil17.php

Hasil :

10.2.

Form Dengan Input Dan Pemrosesan Terpadu Pada contoh di atas, kita bisa melihat contoh pengolahan form dari PHP di

halaman yang terpisah. Tapi kita juga bisa membuat halaman pengolahan yang terletak satu halaman dengan form.

47


Untuk membuat form input dan halaman untuk menampilkan secara terpadu, kita bisa menggunakan statement : If (!Empty (nama_variabel)) Artinya jika variable yang dicari tidak kosong (alias ada) maka baru ditampilkan, sementara jika tidak ada maka tidak akan ditampilkan. Yang perlu diketahui adalah digunakannya alamat action : $_server [‘php_self’] Artinya alamat action akan mengacu ke halaman itu sendiri dan bukan di halaman yang lain. Dengan demikian, jika form di submit, maka halaman yang dipanggil tetap halaman yang sama. Contoh Script Pembuatan Form Dengan Input dan Pemrosesan Terpadu Contoh18.php

48


Hasil :

49


10.3.

Komponen Form Sebuah website dinamis seringkali memerlukan interaksi antara browser client

dan server bisa berupa pemasukan data teks, angka, atau upload file untuk diproses oleh server. Untuk mewadahi suatu data yang dikirimkan oleh browser client, dibutuhkan adanya FORM HTML. Penggunaan form misalnya untuk pendaftaran keanggotaan, pemasukan kode kartu kredit, login user, transaksi perbelanjaan, dan upload file. Dalam FORM HTML terdapat beberapa komponen yang bisa digunakan, antara lain : a. Form

b. Text Box

Text box : untuk menginput data string ataupun angka. < INPUT TYPE=TEXT NAME=name SIZE=size VALUE=value>

c. Text Area

Text area : untuk menginput string ataupun angka yang terdiri atas banyak baris. d. Radio buton Radio buton : untuk memilih satu pernyataan dari beberapa pernyataan yang disediakan. <input type=”radio” value=value checked name=”nama_variabel”> 50 Web Programming 1 AMIK Bina Sarana Informatika e. Combo Box Combo box untuk menampilkan daftar data. <select size=”1” name=”nama_variabel”> <option>Combo1</option> <option>Combo2</option> f. Check Box Check box untuk memilih satu atau lebih pernyataan dari beberapa pernyataan yang disediakan. <input type=”checkbox” name=”nama_variabel” value=”ON” checked> g. Submit Submit untuk mengirimkan semua variable data pada komponen-komponen form yang ada. <input type=”submit” name=”submit” value=”submit”> h. Reset Reset untuk membatalkan semua penginputan yang telah dituliskan. <input type=”reset” name=”reset” value=”reset”> Latihan Pembuatan dan Pemanggilan Form : 1. Buat script program untuk membuat form input dengan data sbb : 51 Web Programming 1 AMIK Bina Sarana Informatika 2. Buat script program untuk memanggil data dari form input dengan bentuk sbb : Jawaban : 1. Input_data_pegawai.php 52 Web Programming 1 AMIK Bina Sarana Informatika 2. Lihat_data_pegawai.php 53 Web Programming 1 AMIK Bina Sarana Informatika Latihan 1 : Tampilan Input Tampilan Output Ketentuan Soal : Jika STUDIO 1 maka bintang tamu “Opick” Jika STUDIO 2 maka bintang tamu “Raihan” Jika Jenis kelas VIP maka harga 500000 Selain itu kelas FESTIVAL maka harga 250000 Hitung Total Harga Jika klik Back to Home akan kembali ke halaman 1 54 Web Programming 1 AMIK Bina Sarana Informatika Latihan 2 : Tampilan Input Tampilan Output Ketentuan Soal : Jenis Cat : MOWILEX maka Harga = 20000 DANAPAINT maka Harga = 30000 CATYLAC maka Harga = 40000 Total Harga = Harga * Jumlah Beli Diskon: Jika Jumlah Beli >= 5 maka diskon 5% dari Total Harga Jika Jumlah Beli >= 10 maka diskon 10% dari Total Harga Selain itu diskon=0 Total Bayar = Total Harga - Diskon Jika di Klik Kembali maka akan tampil Form cat.php 55 Web Programming 1 AMIK Bina Sarana Informatika BAB XI PEMBUATAN DATABASE MySQL 11.1. Database MySQL adalah sebuah software database. Database merupakan sebuah tempat penyimpanan data yang jenisnya beraneka ragam. MySQL merupakan tipe data relasional yang artinya MySQL menyimpan datanya dalam bentuk tabel-tabel yang saling berhubungan. Keuntungan menyimpan data di database adalah kemudahannya dalam penyimpanan dan menampilkan data karena dalam bentuk tabel. Untuk melakukan pengolahan terhadap tabel, kita dapat menggunakan perintah SQL. 11.2. Mengenal MySQL Salah satu fitur unggulan PHP adalah kemudahannya untuk diintegarasikan dengan database. Di PHP, sangat mudah mengoneksikan diri dengan database. Database paling lazim yang digunakan untuk dipadukan dengan PHP adalah MySQL. PHP dan MySQL ibarat roti dan selai, saling melengkapi. PHP tanpa MySQL tidak akan powerful karena tidak bisa digunakan untuk menyimpan data dalam jumlah banyak. Keuntungan menggunakan database MySQL : 1. Gratis dan Open Source 56 Web Programming 1 AMIK Bina Sarana Informatika 2. Ada versi komersialnya juga, digunakan jika ingin memberikan dukungan teknis 3. Biaya yang harus dikeluarkan jauh lebih murah dibandingkan merek lainnya 4. Tersedia di banyak platform 5. Menggunakan standar penulisan SQL ANSI 11.3. Hubungan PHP Dengan MySQL PHP-MySql adalah suatu fungsi yang menjembatani antara php sebagai programming web server dan mysql sebagai database, sehingga data-data yang terdapat pada database mysql dapat ditampilkan pada browser. Fungsi-fungsi dalam mysql diantaranya adalah : 1. MYSQL-CONNECT() Menghubungkan ke server mysql. Fungsi ini merupakan fungsi awal yang akan dijalankan sebelum melakukan fungsi-fungsi lain. Bentuk umum penulisan : Mysql_connect(host,user,password) 2. MYSQL_CREATE_DB() Fungsi yang sangat jarang di gunakan karena pada umumnya setiap programmer web, lebih cenderung dalam membuat database pada console atau phpmyadmin pada browser. Fungsi ini untuk membuat database baru. Bentuk umum penulisan : 3. Mysql_create_db(nama_database) MYSQL_SELECT_DB() Fungsi ini untuk mengaktifkan database yang telah tersedia pada mysql server. 57 Web Programming 1 AMIK Bina Sarana Informatika Bentuk umum penulisan : Mysql_select_db(nama_database) 4. MYSQL_QUERY() Fungsi ini untuk memasukkan perintah-perintah SQL. Bentuk umum penulisan : Mysql_query(perintah-perintah SQL) ; 5. MYSQL_NUM_ROWS() Fungsi ini untuk mengetahui berapa jumlah record terkini. Fungsi ini berguna apabila akan membuat tabel yang bercorak. Bentuk umum penulisan : Mysql_num_rows(variabel) ; 6. MYSQL_FETCH_ROW() Fungsi ini untuk mengambil data per record atau per baris dalam suatu tabel, berdasarkan sistem urutan nomor index field. Bentuk umum penulisan : Mysql_fetch_rows(variabel) ; 7. MYSQL_FETCH_ARRAY() Fungsi ini memiliki fungsi yang sama dengan mysql_fetch_row() yaitu mengambil data per record. Yang membedakan adalah jika mysql_fetch_row() mengambil data berdasarkan nomor urut index sedangkan fungsi ini adalah nama fieldnya. Bentuk umum penulisan : Mysql_fetch_rows(variabel) ; 58 Web Programming 1 AMIK Bina Sarana Informatika 11.4. Membuat Database MySQL Menggunakan PHPMyAdmin Untuk mengakses database MySQL digunakan software MySQL Client. Ada banyak MySQL Client, dari mulai yang berbasis command line, aplikasi GUI hingga berbasis web. PHPMyAdmin adalah MySQL Client yang berupa aplikasi web dan umumnya tersedia di server PHP seperti XAMPP maupun server komersial lainnya. Berikut ini cara mengakses PHPMyAdmin : 1. Buka browser kemudian ketikkan alamat URL : http://localhost/phpmyadmin. halaman ini bisa diakses menggunakan webserver local. 2. Halaman Awal PHPMyAdmin Untuk membuat database baru. Klik tab database. Kemudian ketikkan nama database di kolom “Create Database”. Nama database :dbberita 59 Web Programming 1 AMIK Bina Sarana Informatika Klik tab database Ketik nama database, klik tombol Create 3. Setelah membuat database, langkah berikutnya adalah pembuatan tabel. Buat tabel dengan nama tabel “buku_tamu” di kolom Create Table dan number of columns : 4. Jika sudah diinput, klik tombol GO 60 Web Programming 1 AMIK Bina Sarana Informatika 4. Isikan data untuk struktur tabel buku_tamu sebagai berikut : Name Id Nama Email Pesan Type Int Varchar Varchar Text Length/Value Keterangan Primary key, auto increment 25 30 Tipe-tipe data yang sering digunakan adalah : a. INT untuk menyatakan data berupa angka b. VARCHAR untuk menyatakan data berupa karakter atau string ( batasnya sampai 255 karakter) c. DATE untuk menyatakan data berupa tanggal d. TIME untuk menyatakan data berupa waktu e. TEXT untuk menyatakan data berupa karakter dalam jumlah yang banyak (lebuh dari 255 karakter) misalnya untuk isi berita dan pesan f. CHAR untuk menyatakan data berupa string yang tetap 61 Web Programming 1 AMIK Bina Sarana Informatika BAB XII DREAMWEAVER CS5 12.1. Keuntungan Menggunakan Dreamweaver CS5 Dreamweaver CS5 adalah software yang luar biasa untuk membuat website. Dengan menggunakan Dreamweaver CS5, kita dapat membuat hamper dari semua tipe halaman web. Selain itu, proses penggunaannya pun mudah dan cepat, bahkan bisa menghasilkan tampilan halaman web yang canggih. Selain itu, Dreamweaver CS5 juga dilengkapi dengan toolbar Browser Navigation semacam tool seperti yang ada pada browser yang terdiri dari back, forward, stop, home, address, dan live view option. 12.2. 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 pilihansebelum bekerja dengan Dreamweaver CS5. Dua pilihan itu seperti berikut : 1. Open a Recent Item : digunakan untuk bekerja dengan dokumen yang telah ada. 2. Create New : digunakan untuk bekerja dari awal, yakni dengan membuat dokumen baru. 62 Web Programming 1 AMIK Bina Sarana Informatika Gambar Tampilan Awal Halaman Dreamweaver CS5 63 </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/modul-praktikum-web-programming-1-disusun-oleh-tim-penyusun-" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "MODUL PRAKTIKUM WEB PROGRAMMING 1. Disusun Oleh Tim Penyusun Modul Manajemen Informatika"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;">

Copyright © 2024 ADOC.PUB. All rights reserved.
About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy

Sign In

Email

Password

Remember me Forgot password?

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

MODUL PRAKTIKUM WEB PROGRAMMING 1. Disusun Oleh Tim Penyusun Modul Manajemen Informatika

Recommend Documents

dan