Pemrograman Web 2015 - UIGM | Login Student

Pemrograman Web 2015
BAB I
Pendahuluan
1.1 Internet dan Web
Internet sebenarnya merupakan contoh sebuah jaringan computer. Jaringan ini menghubungkan
jutaan computer yang tersebar di seluruh dunia. Yang menarik, siapapun dapat terhubung ke
dalam jaringan ini.
Internet banyak memberikan keuntungan pada pemakai. Namun dibalik manfaat yang bisa
diperoleh, Internet juga membawa dampak negative. Keuntungan pertam ayang doperoleh
melalui Internet adalah kemudahan dalam memperoleh informasi. Internet memungkinkan
siapapun mengakses berita-beria terkini melalui Koran-koran elektronis seperti Republika Online
(www.republika.co.id) dan Kompas Cyber Media (www.kompas.com) ataupun sumber lain
seperti CNN news (www.cnn.com) . hasil riset dalam bentuk abstraksi atau terkadang dala
bentuk makalah lengkap, majalah, catalog atau bahkan buku juga dapat diperoleh secara online.
Kedua, Internet mendukung transaksi dan operasi bisnis atau yang dikenal dengan sebutan ebussiness. Melalui internet dimungkinkan untuk melakukan pembelian barang secara online.
Ketiga, berbagai aktivitas baru dapat ditangani oleh internet : Misal

Sistem pembelajaran jarak jauh (distance learning atau e-learning) yang memungkinkan
kuliah secara online atau melakukan diskusi dalam kelas jarak jauh

Sistem telepon dengan biaya murah

Pencarian lowongan kerja dan

Transfer uang
Adapun dampak negative yang diakibatkan oleh internet antara lain kemudahan orang untuk
menjiplak karya orang lain, kejahatan penggunaan kartu kredit, perusakan sistem melalui virus,
penayangan pornografi, dan bahkan kemudahan dalam melakukan agitasi
Web menggunakan protocol yang disebut HTTP (hypertext transfer protocol) yang berjalan pada
TCP/IP. Adapun dokumen web ditulis dalam format HTML (Hypertext Markup Language).
Dokumen ini diletakkan dalam web server (Server yang melayani permintaan halaman web) dan
diakses oleh klien (pengakses informasi) melalui perangkat lunak yang disebut web browser atau
Halaman 1 Pemrograman Web 2015
sering disebut browser saja. Hypertext adalah metode yang mengaitkan suatu hubungan (link)
pada suatu dokumen yang memungkinkan untuk melompat dari suatu dokumen ke dokumen lain
melalui suatu teks. Link menyatakan suatu bagian dalam suatu dokumen yang apabila diklik oleh
pemakai maka dokumen atau berkas yang terkait dengan link tersebut akan segera ditampilkan
oleh browser.
Penggunaan hypertext pada web juga telah dikembangkan lebih jauh menuju ke hypermedia.
Dengan menggunakan pendekatan hypermedia, tak hanya teks yang dapat dikaitkan, melainkan
juga gambar , suara dan bahkan video.
Istilah web site (situs web) menyatakan lokasi dari nama domain web. Contoh toko buu online
Amazon memiliki situs web www.amazon.com sedangkan web republika online adalah
www.republika.co.id
Informasi yang terdapat pada web disebut halaman web (web page). Untuk mengakses sebuah
halaman web dari browser, pemakai perlu menyebutkan URL (Uniform Resource Locator). URL
tersusun atas tiga bagian :
1
Format transfer
2
Nama host, dan
3
Path berkas dokumen
Sebagai contoh, URL dapat berupa
www.jagoancoding.com/member/index.php
Format transfer protocol Direktori http://www.jagoancoding.com/member/index.php
Nama Domain Dokumen Halaman 2 Pemrograman Web 2015
1.2 Dasar HTML
Aplikasi yang berbasis web sangat mendominasi pada lingkungan internet. Yang menjadi
landasan aplikasi seperti ini adalah HTML. HTML (Hypertext MarkUp Language) umumnya
dibuat dengan menggunakan suatu perangkat lunak pembangkit kode-kode HTML.
Pada prakteknya, aplikasi berbasis web tidak hanya ditulis dengan kode HTML, melainkan juga
melibatkan kode-kode lain seperti PHP atau Perl. Tujuannya adalah untuk membentuk halaman
yang bersifat dinamis. Perlu diketahui, aplikasi web itu sendiri dapat dibagi menjadi :

Web statis

Web dinamis
Web statis dibentuk dengan menggunakan HTML saja. Kekurangan aplikasi seperti ini terletak
pada keharusan untuk memelihara program secara terus-menerus untuk mengikuti setiap
perubahan yang terjadi kelemahan ini diatasi dengan model aplikasi web dinamis
Dengan memperluas kemampuan HTML, yakni dengan menggunakan perangkat lunak
tambahan, perubahan informasi dalam halama-halaman web dapat ditangani melalui perubahan
data , bukan melalui perubahan program. Sebagai implementasinya aplikasi web dapat
dikoneksikan ke basis data. Dengan demikian, perubahan informasi dapat dilakukan oleh
operator atau yang bertanggung jawab yang bertanggung jawan terhadap pemuktahiran data, dan
tidak menjadi tanggung jawab pemrogram atau web master.
HTML (hypertext Markup Language) adalah suatu baha sa yang digunakan untuk menulis
halaman web. HTML dirancang untuk digunakan tanpa tergantung pada suatu platform tertentu
(Platform Independent). Dokumen HTML adalah suatu dokumen teks biasa, dan disebut sebagai
markup language karena mengandung tanda-tanda (tag) tertentu yang digunakan untuk
menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu
dokumen. Pada dokumen HTML yang termasuk sistem hypertext, kita tidak harus membaca
dokumen HTML yang termasuk sistem hypertext, kita tidak harus membaca dokumen tersebut
secara urut dari atas ke bawah atau sebaliknya, tetapi kita dapat menuju pada topic tertentu
secara langsung dengan menggunakan teks penghubung yang akan membawa anda ke suatu
topic atau dokumen lain secara langsung.
Halaman 3 Pemrograman Web 2015
HTML adalah suatu bahasa yang digunakan untuk menulis halaman web. Ciri utama dokumen
HTML adalah adanya tag dan elemen. Elemen dalam dokumen HTML di kategorikan menjadi
dua yaitu elemen <HEAD> yang berfungsi memberikan informasi tentang dokumen tersebut dan
elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser,
seperti paragraph, list (daftar), table dan lain-lain. Sedangkan tag dinyatakan dengan tanda lebih
kecil “<” (tag awal) dan tanda lebih besar “ >” (tag akhir). Dalam penggunaannya sebagian besar
kode HTML tersebut harus terletak di antara tag container. Yaitu diawalai dengan <nametag>
dan diakhiriri dengan </nametag> (terdapat tanda “/”).
Dokumen HTML mempunyai tiga buah tag utama yang membentuk struktur dari dokumen
HTML yaitu HTML, HEAD dan BODY. Tag HTML berfungsi untuk menyatakan suatu
dokumen HTML, tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML
dan tag BODY berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam
dokumen HTML
Struktur dokumen HTML dapat terlihat seperti berikut :
<HTML> ‐‐‐‐‐ Sebagai tanda awal dokumen <HEAD> ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐Bagian HEAD‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ Sebagai informasi page header. Didalam tag ini kita bisa meletakkan tag‐tag TITLE, BASE </HEAD> <BODY> ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐Bagian Body‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ Didalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link warna visited link, warna active link dan lain‐lain </BODY> </HTML> Contoh File HTML
Halaman 4 Pemrograman Web 2015
CONTOH HTML SEDERHANA <HTML> <HEAD> <TITLE>Program HTML Sederhana</TITLE> </HEAD> <BODY> Selamat datang di pemrograman HTML </BODY> </HTML> Hasil
Halaman 5 Pemrograman Web 2015
1.3 Instalasi Xampp
Langkah 1, Klik 2 kali pada xampp‐win32‐1‐8.3.5‐VC11‐Installer Langkah 2, klik ok pada peringatan
Halaman 6 Pemrograman Web 2015
Langkah 3, klik next
Langkah 4, klik next pada komponen diatas
Halaman 7 Pemrograman Web 2015
Langkah 5, pilih folder tempat instalasi xampp
Langkah 6, klik next pada pilihan bitnami
Halaman 8 Pemrograman Web 2015
Langkah 7, proses instalasi telah dimulai, silahkan tunggu sampai proses instalasi selesai
Terakhir jika telah selesai, maka silahkan start di xampp control panel
Halaman 9 Pemrograman Web 2015
Selanjutnya instalasi composer, sebagai software pengunduh paket terbaru
Langkah 1, klik next pada tampilan instalasi composer
Langkah 2, pilih tempat dimana php.exe diinstal
Halaman 10 Pemrograman Web 2015
Langkah 3, klik install pada composer setup
Halaman 11 Pemrograman Web 2015
Langkah 4, kllik next, selanjutnya proses instalasi akan dimulai
Halaman 12 Pemrograman Web 2015
Instalasi editor sublime text
Langkah 1 klik dua kali pada software sublime text
Langkah 2 , pilih tempat instalasi sublime text, lalu klik next
Halaman 13 Pemrograman Web 2015
Langkah 3, klik next
Langkah 4, proses instalasi telah selesai
Halaman 14 Pemrograman Web 2015
Tampilan Sublime Text 2
Praktikum 1. Membuat Aplikasi Hello World di PHP
1. Langkah 1 buka editor Sublime Text selanjutnya buat sebuah file php baru
Halaman 15 Pemrograman Web 2015
2. Selanjutnya save as file baru tadi dengan cari mengklik menu file save-as atau
langsung menggunakan tombol CTRL+SHIFT+s, masukkan nama file
helloworld.php
3. Selanjutnya Masukkan kode seperti gambar dibawah ini
Halaman 16 Pemrograman Web 2015
4. Hasil Akhir, pastikan anda telah menjalankan apache dan mysql database melalui
xampp control panel
5. Jalankan browser, pada buku ini kami menggunakan Mozilla firefox, masukkan
halaman localhost/helloworld.php
Halaman 17