Scribd
Unggah
91 tayangan

Web Programming

Pertemuan ini membahas tentang pembelajaran pemrograman web 1. Tujuannya adalah mahasiswa memahami konsep dasar pembuatan web dan mampu membuat web informasi sederhana. Mahasiswa dibagi menjadi kelompok untuk membuat tugas web informasi. Pertemuan ini juga memperkenalkan konsep dasar web, HTML, dan PHP.

Diunggah oleh

qbadsixth
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
91 tayangan

Web Programming

Pertemuan ini membahas tentang pembelajaran pemrograman web 1. Tujuannya adalah mahasiswa memahami konsep dasar pembuatan web dan mampu membuat web informasi sederhana. Mahasiswa dibagi menjadi kelompok untuk membuat tugas web informasi. Pertemuan ini juga memperkenalkan konsep dasar web, HTML, dan PHP.

Diunggah oleh

qbadsixth
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 128

PERTEMUAN 1

PEMROGRAMAN WEB 1

TUJUAN PEMBELAJARAN
Tujuan pembelajaran matakuliah praktikum
Web Programming 1 adalah mahasiswa
diharapkan dapat memahami dan mengerti
konsep dasar dalam pembuatan web dan
mampu membuat sebuah Web Informasi

Kontrak Perkuliahan
Di pertemuan 1 mahasiswa diminta untuk
membuat kelompok untuk tugas pembuatan web
informasi.
Setiap kelompok dapat beranggotakan 4 6
anggota.
Setiap kelompok diharuskan untuk membuat
sebuah web informasi sederhana.
Setiap
kelompok
akan
diminta
untuk
mempresentasikan tugas yang sudah dibuat di
pertemuan 14 dan pertemuan 15

Pertemuan
ke1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Silabus

Pokok Bahasan

Konsep Dasar Web, Pengenalan HTML, & PHP


Dasar-Dasar PHP
Operator
Pengenalan Form dan Pengenalan Adobe
Dreamweaver
Form Lanjutan
Percabangan
Review Materi & Quis
UTS (Ujian Tengah Semester)
Pembuatan Database MYSQL
Pengolahan Halaman Buku Tamu (Studi Kasus I)
Pengolahan Halaman Buku Tamu (Studi Kasus I
Lanjutan )
Pengolahan Halaman Artikel (Studi Kasus II)
Pengolahan Halaman Index Pengunjung (Studi
Kasus III)
Presentasi Tugas Kelompok
Presentasi Tugas Kelompok
UAS (Ujian Akhir Semester)

Keterangan

Tema Web

Web Informasi Sekolah


Web Informasi Toko Kue
Web Informasi Toko Baju
Web Informasi Universitas
Web Informasi Perpustakaan
Web Informasi Toko Bunga
Web Informasi Komunitas

Konsep Dasar Web


Internet
Internet merupakan kependekan dari kata
internetwork, yang berarti rangkaian komputer
yang terhubung menjadi beberapa rangkaian
jaringan. Sistem komputer terhubung secara global
dan menggunakan TCP/IP sebagai protocol. Secara
umum internet dapat diartikan sebagai pertukaran
informasi dan komunikasi. Semua informasi bisa
didapatkan dengan mudah dan bebas di internet
tanpa ada batasan.

Ada beberapa istilah yang sering digunakan apabila


anda bekerja dengan internet diantaranya yaitu:

World Wide Web (WWW)


Website
Web Pages (Halaman Web)
Home Page (Halaman Muka)
Browser
URL (Universal Resource Locator)
HTTP (Hypertext Transfer Protocol)

Lanjutan
DNS (Domain Name System)
TCP/IP (Transmission Control Protocol /
Internet Protocol)
IP (Internet Protocol)
Hyperlink
Web Browser

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 halamanhalaman web yang umumnya berbentuk
dokumen HTML. Server web yang terkenal
diantaranya adalah:

Lanjutan
Apache, web server antar platform
XAMPP
PHPTriad; discontinued
Apache2Triad
Internet Information Service (IIS), hanya dapat
berjalan di sistem operasi MS Windows

Struktur Navigasi
Struktur Navigasi adalah Susunan menu atau
hirarki dari suatu situs yang menggambarkan
isi dari setiap halaman dan link atau navigasi
tiap halaman pada suatu situs web.
Ada 4 macam bentuk dasar dari peta navigasi
yang biasa digunakan dalam proses
pembuatan aplikasi multimedia, yaitu:

Ada 4 macam bentuk dasar dari peta navigasi


yang biasa digunakan dalam proses pembuatan
aplikasi
multimedia,
yaitu:

Struktur Navigasi Linier


Struktur Navigasi Hirarki
Struktur Navigasi Non-Linier
Struktur Navigasi Campuran

PENGENALAN HTML
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.

Struktur Dasar HTML

Contoh penggunaan script HTML


Contoh01.php

Judul Web

Perintah dibuat di antara


<body> dan <body>

Lanjutan
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.
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

Hasil Contoh 01
Hasilnya :

Contoh script penggunaan Tag


HTML
Contoh02.php

Hasil Contoh 02
Hasilnya :

Pembuatan Tabel Menggunakan


HTML

Contoh03.php

Hasil Contoh 03

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

PENGENALAN PHP
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).

Kode PHP
Memasukkan Kode PHP
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
<? php
<?
<%
<script language =
php>

Tag Penutup
?>
?>
%>
</script>

Contoh Script PHP

PERTEMUAN 2

DASAR DASAR PHP

Variabel
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.
Contoh : $nama, $no_telp, $_pekerjaan

Contoh Soal
Contoh05.php:

Hasil Contoh 05
Hasil :

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.
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

Contoh Soal
Contoh06.php:

Latihan
Latihan

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);

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.

Lanjutan
//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

Hasil Contoh 07
Hasil :

PERTEMUAN 3

OPERATOR

Mengenal Operator
Sebuah bahasa pemrograman juga wajib
untuk mampu mengolah nilai operand
(variable atau konstanta yang dioperasikan)
menggunakan operator, seperti menjumlah,
membagi, dan sebagainya.

Lanjutan
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.

Jenis-Jenis Operator
Operator Aritmatika
Operator ini digunakan untuk melakukan perhitungan
matematika, sebagian 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

Contoh operatoraritmatika.php
Hasilnya :

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

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

Hasil
False
False
False
False
True
False

Contoh operatorperbandingan.php
Hasil :

Operator Logika
Operator untuk menyusun kalimat ekspresi/ungkapan logika.
Hasil operasi ini akan didapatkan nilai satu jika benar dan nol
jika salah.
Operator
AND atau &&
OR atau ||
XOR
!

Fungsi
Operasi logika AND
Operasi logika OR
Operasi logika eksklusife OR
Ingkaran/negasi

Contoh operatorlogika.php
Hasilnya :

Operator String
Dalam PHP juga tersedia operator string, yaitu digunakan
untuk operasi penggabungan teks. Adapun symbol yang
digunakan yaitu berupa karakter titik (.).

Contoh operatorstring.php

Hasilnya :

Latihan Operator
Buat script menggunakan bahasa pemrograman PHP untuk
menghitung volume balok menggunakan fungsi operator
aritmatika dan operator string dengan ketentuan sebagai
berikut :
Panjang balok = 10, lebar balok = 7, tinggi balok = 15,
Hitung volume balok dengan rumus = panjang * lebar * tinggi
Buat variable teks1 yang berisi = Belajar Menghitung dan
teks2 yang berisi = Volume Balok. Buat perintah untuk
menggabungkan nilai dari variable teks1 dan teks2
menggunakan operator string.
Outputnya sebagai berikut :

Tampilan Hasil

PERTEMUAN 4

PENGENALAN FORM

Komponen Form
Dalam FORM HTML terdapat beberapa
komponen yang bisa digunakan, antara lain :

Lanjutan

Lanjutan

Pengolahan Data Dari Form


Form di HTML dikenal dengan adanya tag <FORM> dan
ditutup dengan tag </FORM>. Di dalam tag pembuka <FORM>
diikuti dengan atribut action dan method. Action menjelaskan
ke halaman yang digunakan untuk memproses input,
sementara method digunakan untuk mengatur cara memparsing konten
Web menerima input dari user atau pengunjung
menggunakan metode GET dan POST. GET akan mengirimkan
data bersama dengan URL, sedangkan POST akan
mengirimkannya secara terpisah. User mengirimkan data
input dengan mengisi teks atau pilihan pada attibut form
html.

Proses Form menggunakan Metode GET

File metodeget.php

Hasilnya :

Lanjutan
Buat file untuk memproses variable yang diberikan
oleh file metodeget.php, beri nama filenya :
metodegetproses.php

HASIL

Karena
menggunakan
metode
GET,
data
dikirmkan
bersama
dengan URL

Proses Form menggunakan metode : POST

Untuk membuat inputan, dan beri nama file :


metodepost.php

Lanjutan
Buat
file
untuk
memproses variable
yang diberikan oleh
file metodepost.php
beri nama filenya :
metodepostproses.p
hp
Karena
menggunakan
metode POST, data tidak
dikirmkan
bersama
dengan URL

Latihan Pembuatan Form 1


Buat file untuk menampilkan form input dan output
seperti gambar di bawah ini. Simpan dengan nama :
forminputkomentar.php dan tampilkomentar.php
Form Input :

Output
Form Output :

PERTEMUAN 5

LATIHAN
PEMBUATAN FORM

Latihan Pembuatan Form 2


Form input :

FORM OUTPUT

Contoh Pembuatan Form dengan Input, Proses, dan


Output Dalam Satu File
Contoh formdatadiri.php

Tampilan Input

Tampilan Output

Latihan Pembuatan dan Pemanggilan Form :


Buat script program untuk membuat form input dengan data sbb :

Latihan

PERTEMUAN 6

PERCABANGAN

Pernyataan Seleksi
Sebagian besar bahasa pemrograman
mengandung pernyataan seleksi. Pada
dasarnya pernyataan seleksi adalah suatu
mekanisme yang menjelaskan apakah
pernyataan akan dikerjakan atau tidak, hal ini
tergantung kondisi yang dirumuskan. Dalam
bahasa pemrograman PHP pernyataan seleksi
diterapkan dengan menggunakan statement IF
dan Switch Case.

Statement IF
If Tunggal
Bentuk umun Statement IF adalah sebagai berikut :
If ( kondisi )
{
Statement;
}
Prinsip kerjanya adalah perintah di atas akan
dikerjakan apabila kondisi bernilai TRUE atau benar,
sedangkan jika kondisi salah / FALSE maka statement di
atas tidak akan dikerjakan

IF Majemuk
Pernyataan IF dan Else
Pernyataan ELSE merupakan bagian dari pernyataan if.
Else digunakan untuk memberikan alternative perintah
apabila kondisi bernilai salah / FALSE.
Bentuk umum :
If ( kondisi )
{
Statement_1;
}
Else
{
Statement_2;
}

Percabanganifelse.php

Hasilnya :

Lanjutan
Pernyataan IF , ElseIf dan Else
Jika pernyataan else memberikan alternative pilihan kedua, maka
untuk pernyataan ElseIf dapat digunakan untuk meumuskan banyak
alternative pilihan (lebih dari dua pilihan).
Bentuk umum :
Elseif ( kondisi_3)
If ( kondisi_1 )
{
{
Statement_3;
Statement_1;
}
}
Else
Elseif ( kondis_2)
{
{
Statement_n;
Statement_2;
}
}

Percabanganifelseif.php

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.
Bentuk umum :
Switch ( nilai_ekspresi ){
Case nilai_1 : statement_1; break;
Case nilai_2 : statement_2; brea;
Default: statement_n;}

Percabanganswitchcase.php

Tampilan Input

Latihan 1

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
Total Harga : jumlah beli * harga
Jika klik Kembali Ke Awal akan kembali ke halaman input

Tampilan Input

Latihan 2

Ketentuan Soal :
Jenis Cat :
MOWILEX maka Harga = 20000
DANAPAINT maka Harga = 30000
CATYLAC maka Harga = 40000
Total Harga = Harga * Jumlah Beli

Tampilan Output

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

PERTEMUAN 9

PEMBUATAN DATABASE MYSQL

PENGERTIAN 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 tabeltabel 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.

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.

Fungsi-fungsi dalam mysql diantaranya adalah :

MYSQL-CONNECT()
Mysql_connect(host,user,password) ;
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);

Lanjutan (1)
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 :
Mysql_create_db(nama_database) ;

Lanjutan (2)
MYSQL_SELECT_DB()
Fungsi ini untuk mengaktifkan database yang
telah tersedia pada mysql server.
Bentuk umum penulisan :
Mysql_select_db(nama_database) ;

MYSQL_QUERY()
Fungsi ini untuk memasukkan perintah-perintah SQL
Bentuk umum penulisan :.
Mysql_query(perintah-perintah SQL) ;

Lanjutan (3)
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) ;

Lanjutan (4)
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) ;

Lanjutan (5)
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) ;

Membuat Database MySQL Menggunakan


PHPMyAdmin
Buka browser kemudian ketikkan alamat URL :
http://localhost/phpmyadmin. halaman ini bisa
diakses menggunakan webserver local.

Lanjutan
Untuk membuat database baru. Klik tab database. Kemudian
ketikkan nama database di kolom Create Database. Nama
database : db_berita
Klik tab database

Ketik nama database, klik


tombol Create

Lanjutan
Setelah membuat database, langkah berikutnya
adalah pembuatan tabel. Buat tabel dengan nama
tabel artikel di kolom Create Table dan number of
columns : 4. Jika sudah diinput, klik tombol GO

Mengisi Data
Isikan data untuk struktur tabel artikel sebagai
berikut :
Field
name

Type data Length

Idartikel

Int

Judul
Isi
Gambar

Varchar
Text
Varchar

Keterangan
Auto increment, Primary
key

50

100

Membuat Primary Key

Latihan
LATIHAN
Buat tabel baru di dalam database db_berita
dengan nama buku_tamu. Struktur tabel
sebagai berikut :
Field name Type data Length Keterangan
Auto increment,
Id
Int
Primary key
Nama
Varchar
30
Email
Varchar
50
Pesan
Text

MENGENAL ADOBE DREAMWEAVER CS5

Gambar Tampilan Awal Halaman Dreamweaver CS5

Lanjutan

Gambar Point-point area kerja Dreamweaver CS5

PERTEMUAN 10

STUDI KASUS I
BUKU TAMU

Form input buku tamu

Simpan dengan nama tambahbukutamu.php

Script tambahbukutamu.php
Pemanggilan file
simpanbukutamu.php

Script simpanbukutamu.php

Buat file untuk menampilkan data yang sudah


tersimpan ke dalam tabel buku_tamu.

Simpan dengan nama tampilbukutamu.php

Script tampilbukutamu.php

Koneksi
ke
database dan tabel
buku tamu untuk
menampilkan data
dan menghitung
jumlah record

Lanjutan

Script pengulangan untuk


menampilkan data yang ada
di tabel buku tamu

Hyperlink untuk hapus dan


edit buku tamu
Menampilka jumlah record yang ada
di variable jumlah.

PERTEMUAN 11

STUDI KASUS I
BUKU TAMU

Buat file untuk mengubah / mengedit data buku


tamu.

Simpan dengan nama editbukutamu.php

Script editbukutamu.php

Lanjutan

Script updatebukutamu.php

Script hapusbukutamu.php

PERTEMUAN 12

STUDI KASUS II
ARTIKEL

Buat tampilan form untuk halaman tambah


artikel. Seperti di bawah ini :

Script tambahartikel.php

Buat script untuk penyimpanan artikel.


Halaman simpanartikel.php

OUTPUT
Outputnya :

Buat file untuk menampilkan data yang ada di


tabel artikel. Simpan dengan nama
tampilartikel.php

Script tampilartikel.php

Lanjutan

PERTEMUAN 13

STUDI KASUS III


HALAMAN INDEX PENGUNJUNG

Buat file untuk halaman home.

Simpan dengan nama home.php

Script halaman home.php

Buat file untuk mengakses halaman ke dalam file


index.
Script buka_file.php

Buat tampilan halaman index bentuk


seperti di bawah ini :

Script index.php

Lanjutan

Hasil

Lanjutan

PERTEMUAN 14 DAN 15

PRESENTASI TUGAS KELOMPOK

Anda mungkin juga menyukai