Modul Pemrograman WEB

MODUL PEMROGRAMAN WEB

M. Farid Rifai – NIDN : 04.020883.01 1

PEMROGRAMAN WEB

A. Deskripsi Mata Kuliah Mata kuliah ini bermaksud untuk memperkenalkan bahasa pemrograman Web dengan pengorganisasian database di dalamnya. HTML (Hypertext Markup Language) merupkan standard bahasa yang di gunakan untuk menampilkan document web dan PHP: Hypertext Preprocessor adalah bahasa yang dapat ditanamkan atau disisipkan ke dalam HTML PHP banyak dipakai untuk memrogram web dinamis. Database yang akan digunakan adalah MySQL salah satu database server yang sudah cukup trebukti sangat handal.

B. Tujuan Kompetensi Umum

Setelah mengikuti perkuliahan ini, mahasiswa diharapkan bisa membangun website dinamis dan memahami pengorganisasian database.

C. Tujuan Kompetensi Khusus

1. Mampu mebuat struktur dasar HTML dengan fugsi Tag yang ada

2. Mampu membuat aplikasi web dengan menggunakan variable PHP

3. Mampu membuat aplikasi web dengan menggunakan array

4. Mampu membuat aplikasi web dengan menggunakan fungsi pencabangan

5. Mampu membuat aplikasi web dengan menggunakan fungsi perulangan

6. Mampu membuat aplikasi web dengan menggunakan form dengan method get dan post

7. Mampu membuat aplikasi web dengan menampilkan variable yang dikirim form dengan method get dan post

8. Mampu menggunakan database MySQL.

9. Mampu membuat aplikasi web untuk pengolahan data (tambah, update, delete dan cari record)

10. Mampu membuat validasi form dengan menggunakan javascript

11. Mampu membuat aplikasi web untuk searching dan paging

12. Mampu membuat aplikasi web untuk upload dan dowload file

13. Mampu membuat aplikasi web untuk login user



BAB I

PEMBUATAN WEB DENGAN HTML

A. Tujuan Kompetensi Khusus

1. Mampu menjelaskan HTML secara umum

2. Mampu memahami struktur dasar HTML

3. Mampu membuat halaman web dengan menggunakan blok elemen heading

4. Mampu membuat halaman web dengan menggunakan Formating Paragraf

5. Mampu membuat halaman web dengan menggunakan order list dan unorder list.

6. Mampu membuat halaman web dengan menggunakan Definition List

7. Mampu membuat halaman web dengan menggunakan Formating Text

8. Mampu membuat halaman web dengan menggunakan Grouping element

9. Mampu membuat halaman web dengan menggunakan Hyperlink

B. Uraian Materi 1. Pokok Bahasan

1.1 World Wide Web Internet merupkan jaringan global yang menghubungkan suatu

network dengan network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi. World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling populer. WWW bekerja merdasarkan pada tiga mekanisme berikut:

• Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.

• Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet.

• HTML digunakan untuk membuat document yang bisa di akses melalui web.

1.2 Pengenalan HTML

Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu:

• Mengontrol tampilan dari web page dan contentnya. • Mempublikasikan document secara online sehingga bisa di akses dari

seluruh dunia. • Membuat online form yang bisa di gunakan untuk menangani pendaftaran,

transaksi secara online. • Menambahkan object-object seperti image, audi, video dan juga java applet

dalam document HTML.



1.3 Browser dan Editor Browser Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yang lainya.

Editor Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.

C. Langkah-Langkah Praktikum

Tag-tag HTML Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari document HTML Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML. <HTML>

. . .

<HTML> BODY merupakan element, BGCOLOR(Background) merupakan atribut yang memiliki nilai lavender. Untuk memulai bekerja dengan HTML anda bisa gunakan editor Note Pad atau editor lainya. Caranya: Contoh: <BODY BGCOLOR=lavender>

BODY merupakan element, BGCOLOR(Background) merupakan atribut yang memiliki nilai lavender. Untuk memulai bekerja dengan HTML anda bisa gunakan editor Note Pad atau editor lainya. Caranya: 1. Ketikkan tag-tag berikut di notepad.

Gambar 1.0 Tag HTML di notepad



2. Simpan dengan nama file one.htm atau one.html 3. Buka dengan browser internet explorer file one.htm maka outputnya akan

di tampilkan seperti gambar di bawah ini.

Gambar 1.1 Dokumen HTML pertama B. Struktur HTML Document Document HTML bisa di bagi mejadi tiga bagian utama: HTML

Setiap document HTML harus di awali dan di tutup dengan tag HTML <HTML></HTML>

tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut adalah document HTML. HEAD

Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “titile” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai keyword. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainyan pada tag META. Contoh: <META name=”Author” contents=”Bocah Gunung”>

Author dari document tersebut adalah “Bocah Gunung” Atribut http-equiv dapat di gunkan untuk meletakkan nama HTTP Server atribut untuk menciptakan HTTP header.



Contoh: <META http-equiv=”Expires” content=”Wed, 7 May

2003 20:30:40 GMT”> yang akan menciptakan HTTP header :

Expires: Wed, 7 May 2003 20:30:40 GMT Sehingga jika documents di cached, HTTP akan megetahui kapan untuk mengapdate document tersebut pada cache. BODY Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page. <html>

<head>

<title>Welcome to HTML</title>

</head>

<body bgcolor="laveder">

<p>Document HTML yang Pertama</p>

</body>

</html> C. Basic HTML Element Block Level Element Block level element yang sering di gunakan : Heading (H1 sampai H6) Contoh: <html>

<head>

title>Heading Elements</title>

</head>

<body>

<h1>Heading one</h1>

<h2>Heading two</h2>

<h3>Heading three</h3>

<h4>Heading four</h4>

<h5>Heading five</h5>

<h6>Heading six</h6>

</body>

</html>



Gambar 1.2 Contoh Format Heading

Paragraf (P)

Contoh: <html>

<head>

<title>Formating Paragraf</title>

</head>

<body>

<h3>Puisi Ceria</h3>

<p>

mawar berwarna merah, bibir kamu juga merah , bibir kamu semerah mawar

<h2>puisi sedih</h2>

<p>

melati harum baunya, kalau nggak ganti percuma

namanya

</p>

</body>

</html> List Item(LI) List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Contoh: Kita mau mengelompokkan data-data berikut :

• Pisang

• Melati

• Jambu

• Mawar



• Anggrek

• Apel

• Anggur

Dapat kita kelompokkan ke dalam dua kelompok: 1. Buah-buahan

o Pisang

o Jambu

o Apel

o Anggur

2. Bunga

o Melati

o Mawar

o Angrek

Ada tiga macam list yang bisa anda tambahkan ke document HTML: 1. Unordered List (Bullet) : Contoh : <html>

<head>

<title>Unordered List</title>

</head>

<body>

<P>Shedule for HTML Course</P>

<ul>

<li>Sunday</li>

<li>Monday</li>

<li>Tuesday</li>

<li>Wednesday</li>

</ul>

</body>

</html>

Gambar 1.3 Contoh Unordered List



Tabel 1.0 Type Unordered List

Tag Attribute Value Description

<UL> TYPE SQUARE DISC CIRCLE

Bullet Kotak Bullet Titik Bullet Lingkaran

2. Ordered List (Numbering) Contoh: <html>

<head>

<title>Ordered List</title>

</head>

<body>

<P>Shedule for HTML Course</P>

<ol start="1" type="I">

<li>Sunday</li>

<ol type="a">

<li>Introduction to HTML</li>

<li>Creating List</li>

</ol>

<li>Monday</li>

<ol type="A">

<li>Creating table</li>

<li>Inserting Image</li>

</ol>

<li>Tuesday</li>

<ol type="I">

<li>Creating Link</li>

<li>Preparing Website</li>

</ol>

<li>Wednesday</li>

</ol>

</body>

</html>

Gambar 1.4 Contoh Ordered List



Tabel 1.1 Type Ordered List

Tag Attribute Value Description

<OL> TYPE I i A A

Upper Roman Lower Roman Upercase Lowercase

<OL> START N Begin Number Definition List Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri. Contoh: <html>

<head>

<title>Definition List</title>

</head>

<body>

<p><b>List of Internet Resource</b></p>

<dl>

<dt>HTML

<dd>HyperText Markup Langguage is not Language

Programming</dd>

</dt>

<dt>HTTP

<dd>HyperText Transfer Protocol is TCP/IP

Protocol</dd>

</dt>

<dt>Internet

<dd>A network of network</dd>

</dt>

<dt>TCP/IP

<dd>Internet protocol</dd>

</dt>

</dl>

</body>

</html>



Gambar 1.5 Contoh Definition List

Horizontal Rules(HR)

Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam document HTML.

Tabel 1.2 Atribut Horizontal Rules

Attribute Description Position menetukan posisi dari HR,

dengan value : canter | right | left.

Width Untuk menentukan panjang HR default 100%

Size Untuk menentukan tebal dari HR dalam pixel

Noshad Efek bayangan. Inline atau Text Level Element

Inline level yang sering di gunakan: o EM, I, B dan FONT (Pemformatan font)

o A (hyperlink)

o BR (Break line)

o APPLET (Java applet)

o IMG (image)



D. Pemformatan Page Break Tag <BR> di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya mirip dengan carriage return. Contoh: <html>

<head>

<title>Break Line</title>

</head>

<body>

<h3>Buliding Dynamic Web Aplication</h3>

<p>

If you're building a dynamic web application, <br>

start by setting up an application server and <br>

connecting to a database.

</p>

</body>

</html>

Gambar 1.6 Contoh Tag <BR>

Font Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya. Contoh: <html>

<head>

<title>Formating Font</title>

</head>

<font color="#9966FF" size="5">

Setting Up Web Server

</font>

<p>

<font face="Courier New, Courier, mono">

To run web applications, you need a web server.

A web server is software that serves files in response

to requests from web browsers.

A web server is sometimes called an HTTP server.

Common web servers include IIS,



Netscape Enterprise Server, iPlanet Web Server,

and Apache HTTP Server.

</font>

</p>

<body>

</body>

</html>

Gambar 1.7 Contoh Tag <Font>

Tabel 1.3 Atribut Font

Attribute Description Color Untuk menentukan warna font, anda bisa

menggunakan nama font atau hexadecimal (#000000 - #ffffff)

Size Untuk menentukan ukuran dari font 1 – 7 Face Untuk menentukan jenis font biasanya

dalam satu list ada beberapa font dan akan di baca mulai dari yang paling kiri.

Color

Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number.

#RRGGBB

Tabel 1.4 Color

Hexadecimal Color



#FF0000 Red #00FF00 Green #0000FF Blue #000000 Black

#FFFFFF White Alignment

Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain.

Tabel 1.5 Value Alignment

Value Description Left Rata kiri Right Rata kanan Center Rata tengah Justify Rata kanan kiri

Format text Physical Formatting

Tabel 1.6 Physical Formatting

Tag Description <B> ... </B> Bold text <I> ... </I> Italic text <U> ... </U> Underline Text <BIG> ... </BIG> Untuk ukuran yang lebih besar dari

normal <SMALL> ... </SMALL>

Untuk ukuran yang lebih kecil dari normal

<STRIKE> ... </STRIKE>

Untuk memberi garis di tengah text

<SUP> ... </SUP> Superscript text <SUB> ... </SUB> Subscript text <CENTER> ... </CENTER>

Center document

Logical Formatting

Tabel 1.7 Logical Formatting

Tag Description <EM> ... </EM> Text miring / <I>



<STRONG> ... </STRONG>

Text tebal / <B>

<DEL> ... </DEL> Mencoret text / <STRIKE> <INS> ... </INS> Underline text / <U>

Quotes / Indenatasi Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q. Contoh: <html>

<head>


</head>

<body>



</font>

<p>

To run web applications,you need a web server.



<blockquote>





</blockquote>

If you’re not using a web hosting service,

choose a web server and install it on your local computer

or on a remote computer

</p>

</body>

</html>

Gambar 1.8 Contoh Tag <blockquote>



Preformatted text Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya. Contoh: <html>

<head>


</head>

<body>



</font>

<p>

<pre>

To run web applications,you need a web server.







If you’re not using a web hosting service,

choose a web server and install it on your local computer

or on a remote computer

</pre>

</p>

</body>

</html>

Grouping element Tag DIV dan SPAN di gunakan untuk mengelompokkan elementelement HTML. Span digunakan untuk mendefinisikan inline content sementara div digunakan untuk block-level content. Contoh: <html>

<head>

<title>Div dan Span</title>

</head>

<body>

<div>

Divisi 1

<p>

Div tag digunakan untuk mengelompokkan group element

biasanya untuk block-level element.

</p>

</div>

<div align="right">

Divisi 2

<p>

Ini didalam devisi kedua.

di tulis dengan alignment kanan.

</p>

</div>

<span style="font-size:25; color:lavender">

baris ini dalam span dengan warna lavender.



</span>

</body>

</html>

Gambar 1.9 Contoh Tag <div> dan <span>

Hyperlink Link Address Absolute Address - merupakan full internet address (URL) yang meliputi protocol, network location dan path dan nama file. Contoh: http ://www.yahoo.com/index.html Relatif Address - URL yang tidak menyebutkan protocol dan network locationya (hanya path dan nama filenya). Anchor Anchor tag <A> untuk menentukan hyperlink dalam document HTML. HREF property digunakan untuk menentukan tujuan dari hyperlink tersebut. <A HREF=”URL”> Hypertext </A>

<A

HREF=”protocol://host.domain:port/path/filename”>

Hypertext </A> Link ke Document Lain Misalkan ada dua document html link1.htm dan link2.htm untuk membuat link dari link1.htm ke link2.htm :



Link1.htm <html>

<head>

<title>Using Link</title>

</head>

<body>

<center><font size="5" color=hotpink>Creating Link

</font></center>

<br>

<a href="link2.htm"> Click here to view document

2</a>

</body>

</html> Link2.htm <html>

<head>

<title>Document 2</title>

</head>

<center><font size="5" color=limegreen>Creating

Link </font></center>

<br>

<a href="link1.htm"> back to document 1</a>

<body>

</body>

</html> Link ke Section tertentu dalam Document Untuk membuat link ke section tertentu dalam satu document gunakan property name untuk membuat nama tujuan dari link. Syntax name anchor: <A NAME =”nama”>Topic name</A>

untuk membuat link ke name : <A HREF=”#nama”>menuju ke Topic name</A>

contoh: link3.htm <html>

<head>

<title>Anchor Name</title>

</head>

<body>

<pre>

<b>setting up web server</b>

Windows users can get a web server up

and running quickly on their local computer

by installing either PWS or IIS.

The web server may already be installed.

Check your folder structure to see if it contains

a C:\Inetpub or D:\Inetpub folder.

PWS and IIS create this folder during installation.

If you want to install PWS or IIS,

<a href="#install">see Installing a Web Server in Windows.</a>



ASP.NET pages only work with one web server:

Microsoft IIS 5 or higher. PWS is not supported.

Also, because IIS 5 is a service

of the Windows 2000 and Windows XP

Professional operating systems,

you can only use these two versions of Windows

to run ASP.NET applications.

<b><a name="install">Installing a Web Server in Windows </a></b>

To develop and test dynamic web pages,

you need a functioning web server.

This chapter describes how most Windows

users can install and use

a Microsoft web server on their local computer.

</pre>

</body>

</html> Link Ke bagian tertentu Document Lain Untuk membuat link ke bagian tertentu document lain anda bisa gunakan anchor name di document yang menjadi tujuan hperlink. Contoh: <A HREF=”link3.htm#install”>See install

information.</A>

D. Tugas

Buatlah rangkuman mengenai HTML dan contoh-contohnya. Silahkan untuk referensi

buku tentukan sendiri. Kumpulkan dalam bentuk makalah dan dikerjakan

perkelompok.

E. Evaluasi

Buatlah website yang menampilkan profile anda sendiri yang terdiri dari beberapa

halaman diantaranya :

• Halaman utama (home) yang terdiri dari menu (1) Data diri, (2) Pendidikan (3)

Keterampilan Pribadi

• Halaman Data diri (NPM, Nama, Jurusan, Alamat, Telp..dll)

• Halaman Keterampilan pribadi

• Dari beberapa halaman tersebut hubungkan(link) pada halaman utama



BAB II PEMROGRAMAN WEB DENGAN PHP


1 Mampu menjelaskan PHP secara umum

2 Mampu memahami struktur dasar PHP

3 Mampu membuat halaman web dengan menggunakan variable PHP

4 Mampu membuat halaman web dengan menggunakan array

5 Mampu membuat halaman web dengan menggunakan fungsi pencabangan

6 Mampu membuat halaman web dengan menggunakan fungsi perulangan

7 Mampu membuat halaman web dengan menggunakan form dengan method get dan post

8 Mampu membuat halaman web dengan menampilkan variable yang dikirim form dengan method get dan post

B. Uraian Materi 1. Pokok Pembahasan 1.1 Sekilas Tentang PHP

PHP: Hypertext Preprocessor adalah bahasa yang dapat ditanamkan atau disisipkan ke dalam HTML PHP banyak dipakai untuk memrogram web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.

Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995 Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.

Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/F1. Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak pemrograman yang tertarik untuk ikut mengembangkan PHP.

1.2 Tag Awal dan Tag Akhir PHP

Script PHP diawali dan diakhiri dengan menggunakan tag khusus. Ada 4 macam cara yang dapat digunkan untuk menuliskan script PHP didalam suatu dokumen HTML.

Cara 1:

<? script PHP ?>

Cara 2 :



<?php script PHP ?>

Cara 3 :

<% script php %>

Cara 4 :

<%=$namaVar;%>

C. Langkah-Langkah Praktikum 1. Perintah echo Nama File : echo1.php

<html>

<head>

<title>Contoh echo 1</title>

</head>

<body>

<?php

echo "Hai, saya dari script PHP <BR>";

echo "Saya pasti bisa membuat website";

?>

</body>

</html>

2. Penggunaan variable PHP Nama File : echo2.php <html>

<head>


</head>

<body>

<?php

//Pemberian nilai pada variable

$nama="Asep";

$usia=20;

$alamat="Bandung";

//Menampilkan dari variable

echo "Nama saya = $nama <BR>";

echo "Usia saya = $usia <BR>";

echo "Alamat saya = $alamat <BR>";

?>

</body>

</html>

3. Pemberian nilai pada variable PHP Nama File : echo3.php <html>

<head>




</head>

<body>

<?php

//Pemberian nilai pada variable

$a=2.5;

$b=3;

$c=$a+$b;

//Menampilkan dari variable

echo "Nilai variable \$a=$a <br>";

echo "Nilai variable \$b=$b <br>";

echo "Hasil penjumlahan \$a + \$b = $c";

?>

</body>

</html>

4. Penggunaan Array Nama File : array1.php <html>

<head>

<title>Contoh Array 1</title>

</head>

<body>

<?php

/*Pemberian nilai pada array

diisi dengan menunjuk nomor indeksnya

*/

$anak[0]="Dadan";

$anak[1]="Asep";

$anak[2]="Ujang";

//Menampilkan nilai dari array diatas

echo "Isi array \$anak[0] adalah $anak[0] <br>";



?>

</body>

</html>

5. Pemberian nilai array Nama File : array2.php <html>

<head>


</head>

<body>

<?php

// Assigmnet Array Asosiatif

$telpon['Adang']="986888";

$telpon['Yono']="789788";

$telpon['Udin']="972482";

//menampilkan nilai dari array diatas

echo "Telpon Adang adalah ".$telpon['Adang']."<br>";

echo "Telpon Yono adalah ".$telpon['Yono']. "<br>";

echo "Telpon Udin adalah ".$telpon['Udin'];



?>

</body>

</html>

6. Nama File : array3.php <html>

<head>


</head>

<body>

<?php

$ar_a=array(1,2,5,7,8);

print "Isi Array \$ar_a : <br>";

print_r($ar_a);

print"<br>";

$ar_b=array("abc",5,7,90);

print "Isi Array \$ar_b : <br>";

print_r($ar_b);

print"<br>";

$gabung=array_merge($ar_a,$ar_b);

print "Isi Array \$gabung : <br>";

print_r($gabung);

print "<br>";

?>

</body>

</html>

7. Pencabangan dengan IF Nama File : if_1.php

<html>

<head>

<title>Contoh IF-1</title>

</head>

<body>

<?php

$a=5;

$b=7;

echo"\$a=$a <br>";

echo"\$b=$b <br>";

echo"<hr>";

if($a>$b){

echo"\$a > \$b";

}

if($a<$b){

echo"\$a < \$b";

}

if($b==$a){

echo"\$b = \$a";

}



?>

</body>

</html>

8. Nama File : if_2.php

<html>

<head>

<title>Contoh IF - 2</title>

</head>

<body>

<?php

$nilai=65;

echo"\$nilai =$nilai <br>";

echo"<hr>";

if($nilai>=80){

echo"Mutu=A";

}elseif($nilai>=70){

echo"Mutu=B";

}else{

echo"Mutu=C";

}

?>

</body>

</html>

9. Pencabangan dengan Switch Nama File : switch.php

html>

<head>

<title>Contoh Switch</title>

</head>

<body>

<h1>Demo penggunaan switch</h1>

<p>Demo ini menunjukan penggunaan switch untuk menampilkan nama hari

dari suatu angka</p>

<?php

$nohari=3;

echo "no. Hari : $nohari adalah hari : ";

switch($nohari){

case 1 :

echo "Minggu";

break;

case 2 :

echo "Senin";

break;

case 3 :

echo "Selasa";

break;

case 4 :

echo "Rabu";

break;

case 5 :

echo "Kamis";

break;

case 6 :



echo "Jumat";

break;

case 7 :

echo "Sabtu";

break;

}

?>

</body>

</html>

10. Perulangan dengan While Nama File : while.php

<html>

<head>

<title>Contoh While</title>

</head>

<body>

<h1>Demo penggunaan while</h1>

<p>Demo ini menampilkan kelipatan 3 yang lebih kecil 10</p>

<?php

$bil=3;

while($bil<10){

echo"$bil";

echo " ";

$bil=$bil+3;

}

?>

</body>

</html>

11. Perulangan dengan do while Nama File : do_while.php

<html>

<head>

<title>Contoh do While</title>

</head>

<body>

<h1>Demo penggunaan do...while</h1>

<p>Demo ini menampilkan kelipatan 3 yang lebih kecil 10</p>

<?php

$bil=3;

do{

echo"$bil";

echo " ";

$bil=$bil+3;

}while($bil<10);

?>

</body>

</html>

12. Perulangan dengan For Nama File : for.php

<html>

<head>

<title>Contoh for</title>



</head>

<body>

<h1>Demo penggunaan for</h1>

<p>Demo ini menampilkan angka dari 0 s.d. 9</p>

<?php

for($i=0; $i<=9; $i++){

echo "$i";

echo " ";

}

?>

</body>

</html>

13. Penggunaan form method get Nama File : form_get.php

Gambar 2.0 Form method get

<html>

<head>

<title>Contoh Form dengan get</title>

</head>

<body>

<h1>Perbandingan bilangan</h1>

<form action="proc_get.php" method="get">

Bilangan I :

<input name="bil_1" type="text" id="bil_1">

<br>

Bilangan II :


<br>

<input type="submit" name="Submit" value="Bandingkan">

<input type="reset" name="Submit2" value="Reset">

</form>

</body>

</html>

14. Pengambilan nilai dari form method get Nama File : proc_get.php

<html>

<head>

<title>Contoh Pengambilan nilai method get</title>

</head>

<body>

<h1>Proses tampil dari form get </h1>

<?php



//Memberikan nilai pada variable dari form get

$bil_1=$_GET['bil_1'];

$bil_2=$_GET['bil_2'];

echo"<h1>Perbandingan Bilangan</h1><hr>";

echo"Bilangan I = $bil_1<br>";

echo"Bilangan II = $bil_2<br>";

if($bil_1 > $bil_2){

echo"$bil_1 lebih besar dari $bil_2";

}elseif($bil_1 < $bil_2){

echo"$bil_1 lebih kecil dari $bil_2";

}else{

echo "$bil_1 sama dengan $bil_2";

}

?>

</body>

</html>

15. Penggunaan form method post Nama File : form_post.php

Gambar 2.1 Form method post

<html>

<head>

<title>Contoh Form dengan post</title>

</head>

<body>

<h1>Perbandingan bilangan</h1>

<form action="proc_post.php" method="post">

Bilangan I :


<br>

Bilangan II :


<input type="submit" name="Submit" value="Bandingkan">


</form>

</body>

</html>

16. Pengambilan nilai dari form method post Nama File : proc_post.php

<html>

<head>

<title>Contoh Pengambilan nilai method post</title>



</head>

<body>

<h1>Proses tampil dari form post </h1>

<?php

//Memberikan nilai pada variable dari form post

$bil_1=$_POST['bil_1'];

$bil_2=$_POST['bil_2'];

echo"<h1>Perbandingan Bilangan</h1><hr>";

echo"Bilangan I = $bil_1<br>";

echo"Bilangan II = $bil_2<br>";

if($bil_1 > $bil_2){

echo"$bil_1 lebih besar dari $bil_2";

}elseif($bil_1 < $bil_2){

echo"$bil_1 lebih kecil dari $bil_2";

}else{

echo "$bil_1 sama dengan $bil_2";

}

?>

</body>

</html>

17. Nama File : formlogin.php

Gambar 2.2 Form Login

<html>

<head>

<title>Contoh Form Login</title>

</head>

<body>

<h1>Login!</h1>

<form action="proseslogin.php" method="post">

Username :

<input name="username" type="text" id="username">

<br>

Password :

<input name="password" type="password" id="password">

<br>

<input type="submit" name="Submit" value="Login">

<label></label>

</form>

</body>

</html>



18. Nama File : proseslogin.php <html>

<head>

<title>Proses Data Login</title>

</head>

<body>

<h1>Proses tampil dari form post </h1>

<?php

//Memberikan nilai pada variable dari form post

$username=$_POST['username'];

$password=$_POST['password'];

function periksa($username, $password){

if(($username=="super")and($password=="user")){

return true;

}else{

return false;

}

}

if(periksa($username,$password)){

$login=true;

}else{

echo "username atau password salah..!!";

}

if($login){

echo "<h1>Selamat datang..., terimakasih Anda sudah melakukan

login</h1>";

}

?>

</body>

</html>

19. Aplikasi buku tamu Nama File : form_bktamu.php

Gambar 2.3 Form Buku Tamu



<html>

<head>

<title>Buku Tamu</title>

</head>

<body>

<h1>Buku Tamu</h1>

Komentar dan saran sangat kami butuhkan untuk meningkat

kualitas situs kami

<hr>

<form name="form1" method="post" action="">

<table width="49%" border="0">

<tr>

<td width="30%">Nama Anda </td>

<td width="3%">: </td>

<td width="67%">

<input name="nama" type="text" size="25" maxlength="50">

</td>

</tr>

<tr>

<td>Email </td>

<td>:</td>

<td>

<input name="email" type="text" size="25" maxlength="50">

</td>

</tr>

<tr>

<td valign="top">Komentar</td>

<td valign="top">:</td>

<td valign="top">

<textarea name="komentar" cols="40" rows="5"></textarea>

</td>

</tr>

<tr>

<td colspan="3" valign="top">

<input type="submit" name="Submit" value="Kirim">


</td>

</tr>

</table>

</form>

</body>

</html>

20. Nama File : simpan_bktamu.php <html>

<head>

<title>Simpan Data Buku Tamu</title>

</head>

<body>

<?

$nama=$_POST['nama'];

$email=$_POST['email'];

$komentar=$_POST['komentar'];

?>

<h1>Poses Simpan Buku Tamu</h1>

<hr>



Nama Anda : <? echo $nama; ?>

<br>

Email : <? echo $email; ?>

<br>

Komentar : <? echo $komentar ?>

<?

//Proses Simpan

$fp=fopen("bukutamu.dat","a+");

fputs($fp,$nama."|".$email."|" .$komentar."\n");

fclose($fp);

?>

<p>Simpan telah berhasil dilakukan!!</p>

<p><a href="tampil_bktamu.php">Klik disini</a> Untuk melihat daftar

buku tamu</p>

</body>

</html>

21. Nama File : tampil_bktamu.php <html>

<head>

<title>Tampil Buku Tamu</title>

</head>

<body>

<h1>Data Buku Tamu</h1>

<?

//Membaca Buku Tamu

$fp=fopen("bukutamu.dat","r");

while(!feof($fp)){

$baris=fgets($fp,80);

echo "$baris <br>";

}

fclose($fp);

?>

</body>

</html>

D. Tugas

Buatlah rangkuman mengenai PHP dan contoh-contohnya. Silahkan untuk referensi

buku tentukan sendiri. Kumpulkan dalam bentuk makalah dan dikerjakan

perkelompok.

E. Evaluasi

Buatlah website yang menampilkan profile anda sendiri yang terdiri dari beberapa

halaman diantaranya :

• Buatlah Form untuk input data mahasiswa yang terdiri dari NPM, Nama, Jurusan

dan Alamat

• Buatlah script PHP simpan data pada file : .dat dari data yang dikirimkan dari form

input data mahasiswa diatas

• Buatlah script PHP untuk menampikan data yang sudah tersimpan sebelumnya

dalam file .dat



BAB III

APLIKASI DATABASE DENGAN MYSQL


1. Mampu menjelaskan SQL secara umum

2. Mampu menggunakan database MYSQL

3. Mampu menggunakan statement SQL untuk membuat database

4. Mampu menggunakan statement SQL untuk membuat membuat tabel pada database

5. Mampu menggunakan statement SQL untuk memodifikasi struktur tabel yang sudah dibuat

6. Mampu menggunakan statement SQL untuk memasukan data pada tabel

7. Mampu menggunakan statement SQL untuk meng-update data pada tabel

8. Mampu menggunakan statement SQL untuk menghapus data pada tabel

B. Uraian Materi 1. Pokok Pembahasan 1.1 SQL (Structure Query Language) SQL (Structure Query Language) adalah sebuah bahasa yang dipergunakan

untuk mengakses data dalam Basis Data Relasional/ Relation Database.

Bahasa ini merupakan bahasa standar yang digunakan dalam manajemen basis

data relasional. Saat ini hampir semua server basis data/ database server yang

ada mendukung bahasa ini untuk melakukan manajemen datanya.

� DDL (Data Definition Language)

DDL adalah suatu kelompok perintah yang berfungsi untuk

mendefinisikan atribut-atribut basis data, tabel, atribut (kolom), batasan-

batasan terhadap suatu atribut.

Perintah perintah dalam DDL adalah sebagai berikut:

� Perintah untuk membuat database:

create database nama database.

� Perintah untuk menggunakan database tersebut:

use nama database

� Perintah untuk membuat tabel:

create tabel namatabel



( Namakolom1 tipe_data(ukuran),

Namakolom2 tipe_data(ukuran),

...dst

);

Perintah-perintah untuk memanipulasi tabel:

Perintah Keterangan

Alter table namatabel rename namatabelbaru Untuk mengubah nama tabel.

Alter table namatabel add column namafield

tipe_data(ukuran)

Untuk menambah kolom/field.

Alter table namatabel drop column namafield Untuk menghapus kolom/field.

alter table namatabel add index

namaindex(field1,field2,…)

Untuk menambah index.

Alter table namatabel drop index namaindex Untuk menghapus index.

Alter table namatabel change namafieldlama

namafieldbaru jenisfieldbaru

attributefieldbaru

Untuk mengubah jenis

kolom/field.

3. Perintah untuk menghapus tabel:

drop table namatabel;

� DML (Data Manipulation Language)

DML adalah suatu kelompok perintah yang berfungsi untuk memanipulasi

data dalam basis data.

Perintah-perintah dalam DML adalah sebagai berikut:

1. Perintah untuk mengisi data pada tabel:

insert into namatabel (field1, field2,…) values (nilai1, nilai2,…)

2. Perintah untuk meng-update data:

update namatabel set field1 = nilai1, field2 = nilai2, … where field = nilai

3. Perintah untuk menghapus data:



delete from namatabel where field = nilai

4. Perintah-perintah untuk menampilkan data:

Perintah Keterangan

Select * from namatabel Untuk menampilkan seluruh data pada

tabel tertentu.

select field1, field2, … from namatabel Untuk data field-field tertentu pada tabel

tertentu.

select * from namatabel where field = nilai Untuk menampilkan seluruh data pada

tabel tertentu dengan kriteria yang

sudah ditentukan pada where clause.

select * from namatabel where fieldnilai

between batasnilai1 and batasnilai2

Untuk menampilkan seluruh data pada

tabel tertentu dengan kriteria yang sudah

ditentukan pada where clause, diantara

dua buah nilai tertentu.

select * from namatabel order by

namafield ASC/DESC

Untuk menampilkan seluruh data pada

tabel tertentu secara terurut (baik

ascending maupun descending.

1.2 MYSQL

MySQL adalah suatu perangkat lunak database relasi (Relation Database

Management System/RDMS) seperti halnya Oracle, PostgreSQL, Microsoft

SQL. MySQL jangan disama-artikan dengan SQL (Structure Query Language)

yang didefinisikan sebagai sintaks perintah-perintah tertentu dalam bahasa

(program) yang digunakan untuk mengelola suatu database.

Jadi MySQL dan SQL adalah dua hal yang berbeda. Mudahnya MySQL

adalah softwarenya dan SQL adalah bahasa perintahnya..



� TIPE DATA Beberapa tipe data dalam MySQL yang sering dipakai:

Tipe Data Keterangan

INT Angka -2147483648 s/d 2147483647

FLOAT Angka pecahan DATE Tanggal

Format : YYYY-MM-DD DATETIME Tanggal dan Waktu

Format : YYYY-MM-DD HH:MM:SS CHAR String dengan panjang tetap sesuai

dengan yang ditentukan. Panjangnya 1-255 karakter

VARCHAR String dengan panjang yang berubah-ubah sesuai dengan yang disimpan saat itu. Panjangnya 1 – 255 karakter

BLOB Teks dengan panjang maksimum 65.535 karakter

LONGBLOB Teks dengan panjang maksimum 294.967.295 karakter

Catatan :

Masih banyak tipe data yang lain di mysql, selain pada table diatas

C. Langkah-Langkah Praktikum

1. Nama Database: akademik Tabel : mahasiswa No Field Type Size

1 Npm (Primary Key) Char 8

2 Nama Char 30 3 Jurusan Char 5 4 Tgl_lahir Date 6

5 Alamat Char 40

Contoh Pembuatan database dengan SQL

//Membuat database akademik

create database akademik;

//Menggunakan database akademik

use akademik;



//Membuat table pada database akademik

create table mahasiswa(npm char(8) primary key, nama char(30),jurusan

char(5),tgl_lahir date,alamat char(40));

//Memasukan data pada table mahasiswa hanya 1 record

insert into

mahasiswa(npm,nama,jurusan,tgl_lahir,alamat)values(“08302001”,”Anwar”,”MI

F”,”1989-02-01”,”Bandung”);

//Memasukan data lebih dari 1 record

insert into

mahasiswa(npm,nama,jurusan,tgl_lahir,alamat)values(“08301174”,”Yulianita”

,”AKE”,”1987-07-27”,”Bandung”), (“08302002”,”Feri”,”MIF”,”1980-02-

05”,”Jakarta”);

//Menampilkan semua table mahasiswa

Select * from mahasiswa;

//Mengubah data pada table mahasiswa

update mahasiswa set alamat="Garut" where npm="07301174";

//Menghapus data pada table mahasiswa dengan npm= 08302002

delete from mahasiswa where npm="08302002";



BAB IV

KONEKSI DATABASE DENGAN PHP


1. Mampu membuat koneksi ke database MySQL

2. Mampu membuat halaman web untuk menampilkan record dari database MySQL.

3. Mampu membuat halaman web untuk menambahkan record pada database MySQL

4. Mampu membuat halaman web untuk meng-update record pada database MySQL

5. Mampu membuat halaman web untuk menghapus record pada database MySQL

6. Mampu membuat halaman web untuk mencari record pada database MySQL

B. Uraian Materi 1. Pokok Pembahasan 1.1 Koneksi ke database MySQL

mysql_connect();

Digunakan untuk melakukan uji dan koneksi ke database MySQL

Sintaks :

$conn=mysql_connect(host,username,password);

Keterangan :

• $conn adalah variable penampung status hasil koneksi ke database • host adalah nama host atau alamat server database MySQL. • username adalah nama user yang telah diberi hak untuk dapat

mengakses server database • password adalah kata sandi untuk username untuk dapat masuk

kedalam database

1.2 Memilih Database mysql_select_db();

Digunakan untuk memilih database yang akan digunakan yang terdapat pada MySQL



Sintaks : mysql_select_db(namadatabase, $conn);

Keterangan :

• namadatabase adalah nama database yang akan dikenai proses • $conn adalah merupakan variable koneksi yang sudah dibuat sebelumnya

1.3 Eksekusi Perintah SQL

mysql_query();

Digunakan untuk melakukan eksekusi perintah SQL untuk memanipulasi database Sintaks : $hasil=mysql_query(“SQL Statement”);

Keterangan : $hasil adalah variable penampung hasil eksekusi SQL statement/perintah SQL

1.4 Mengambil Isi Pada Tabel mysql_fetch_array();

Digunakan untuk mengambil isi tabel dengan cara mengakses field yang ada pada tabel tersebut. Sintaks : $row=mysql_fetch_array($hasil);

Keterangan : $row adalah array satu record dari record $hasil yang diproses , nomor record sesuai dengan nomor urut dari proses mysql_fetch_array yang sedang lakukan

C. Langkah-langkah Praktikum 1. Koneksi ke MySQL Nama File : connection.php <?

$host="127.0.0.1";

$user="root";



$pwd="";

$db="akademik";

$conn=mysql_connect($host,$user,$pwd)

or die("Could Not Connect :".mysql_error());

mysql_select_db($db,$conn);

?>

2. Membuat Daftar Mahasiswa

Nama File : mahasiswa.php

Gambar 4.0 Desain Daftar Mahasiswa

<?

require_once("connection.php");

$sql="SELECT * FROM mahasiswa";

$result=mysql_query($sql);

?>

<html>

<head>

<title>::Daftar Mahasiswa::</title>

</head>

<body>

<h2>DAFTAR MAHASISWA</h2>

<table width="100%" border="1" cellpadding="0" cellspacing="0">

<tr>

<td width="11%" bgcolor="#CCCCCC">

<div align="center"><strong>NPM</strong></div></td>


<div align="center"><strong>Nama</strong></div></td>


<div align="center"><strong>Tgl Lahir </strong></div></td>


<div align="center"><strong>Jurusan</strong></div></td>


<div align="center"><strong>Alamat</strong></div></td>


<div align="center"><strong>Proses</strong></div></td>

</tr>

<? while($row=mysql_fetch_array($result)){ ?>

<tr>

<td><?=$row[npm]?></td>

<td><?=$row[nama]?></td>

<td><?=$row[tgl_lahir]?></td>

<td><?=$row[jurusan]?></td>

<td><?=$row[alamat]?></td>

<td><a href="edit_mhs.php?npm=<?=$row['npm']?>">Edit</a> |

<a href="delete_mhs.php?npm=<?=$row['npm']?>">Hapus</a></td>

</tr>

<? } ?>

</table>

<p><a href="insert_mhs.php">Tambah Data</a></p>



</body>

</html>

3. Menambahkan Data Mahasiswa

Nama File : insert_mhs.php

Gambar 4.1 Desain Form Input Mahasiswa

<?

//Memanggil file koneksi


//Memproses jika ditekan tombol simpan

if($_POST['Submit']=='Simpan'){

//Pengecekan apakah NPM sudah ??

$sql="SELECT * FROM mahasiswa WHERE npm='".$_POST['npm']."'";

//Mengeksekusi SQL Statement

$result=mysql_query($sql) or die(mysql_error());;

//Mengetahui jumlah record

$num_rows=mysql_num_rows($result);

/*

Mengetahui jika jumlah record > 0 berarti Ada

dan sebaliknya berarti tidak ada

*/

if($num_rows>0){

echo"<script>alert('NPM yang dimasukan sudah ada');</script>";

echo"<script>location='insert_mhs.php';</script>";

exit();

}

//Insert record pada tabel mahasiswa

$sql="INSERT INTO mahasiswa(npm,nama,tgl_lahir,jurusan,alamat)".

"VALUES('".$_POST['npm']."','".$_POST['nama']."',".

"'".$_POST['tgl_lahir']."','".$_POST['jurusan']."',".

"'".$_POST['alamat']."')";




$result=mysql_query($sql) or die(mysql_error());

if($result){

echo"<script>alert('Data sudah tersimpan');</script>";

echo"<script>location='mahasiswa.php';</script>";

}

}

?>

<html>

<head>

<title>Insert Mahasiswa</title>

<script type="text/javascript">

function cek_data()

{

if(form1.npm.value=="")

{

alert("NPM tidak boleh kosong");

form1.npm.focus()

return false

}

if(form1.nama.value=="")

{

alert("Nama tidak boleh kosong");

form1.nama.focus()

return false

}

if(form1.tgl_lahir.value=="")

{

alert("Tgl Lahir tidak boleh kosong");

form1.tgl_lahir.focus()

return false

}

if(form1.jurusan.value=="")

{

alert("Jurusan belum dipilih");

form1.jurusan.focus()

return false

}

if(form1.alamat.value=="")

{

alert("Alamat tidak boleh kosong");

form1.alamat.focus()

return false

}

return true

}

</script>

</head>

<body>

<h2>Menambah Mahasiswa</h2>

<hr>

<form name="form1" method="post" action="<? $_SERVER['PHP_SELF']; ?>"

onSubmit="return cek_data()">


<tr>

<td width="19%">NPM</td>

<td width="81%"><label>

<input name="npm" type="text" size="8" maxlength="8">

</label></td>

</tr>



<tr>

<td>Nama</td>

<td><label>

<input name="nama" type="text" size="30" maxlength="30">

</label></td>

</tr>

<tr>

<td>Tgl Lahir (YYYY-MM-DD) </td>

<td><label>

<input name="tgl_lahir" type="text" size="10" maxlength="10">

</label></td>

</tr>

<tr>

<td>Jurusan</td>

<td><label>

<select name="jurusan" id="jurusan">

<option selected value="">-- Pilihan --</option>

<option value="MIF">MIF</option>

<option value="TIK">TIK</option>

<option value="AKE">AKE</option>

<option value="ARM">ARM</option>

<option value="MPRS">MPRS</option>

</select>

</label></td>

</tr>

<tr>

<td>Alamat</td>

<td><label>

<textarea name="alamat" cols="30" rows="2"id="alamat"></textarea>

</label></td>

</tr>

<tr>

<td> </td>

<td><label>

<input type="submit" name="Submit" value="Simpan">

<input type="reset" name="Reset" value="Reset">

</label></td>

</tr>

</table>

</form>

</body>

</html>

4. Hapus data mahasiswa Nama File : del_mhs.php

<?



//SQL Statement untuk menghapus record

$sql="DELETE FROM mahasiswa WHERE npm='".$_GET['npm']."'";

//Mengeksekusi SQL statement

$result=mysql_query($sql)or die(mysql_error());

if($result){

echo"<script>alert('Data sudah terhapus');</script>";




}

?>

5. Merubah / edit data mahasiswa

Nama File : edit_mhs.php

Gambar 4.2 Desain Form Edit Mahasiswa

<?



//SQL Statement untuk menampilkan record yang akan di edit

$sql_mhs="SELECT * FROM mahasiswa WHERE npm='".$_GET['npm']."'";

$result=mysql_query($sql_mhs)or die(mysql_error());

$row=mysql_fetch_array($result);

//Memproses jika ditekan tombol Edit

if($_POST['Submit']=='Edit'){

//Update record pada tabel mahasiswa

$sql="UPDATE mahasiswa SET npm='".$_POST['npm']."',".

"nama='".$_POST['nama']."',tgl_lahir='".$_POST['tgl_lahir']."',".

"jurusan='".$_POST['jurusan']."',alamat='".$_POST['alamat']."'".

"WHERE npm='".$_POST['no']."'";

$result=mysql_query($sql) or die(mysql_error());

if($result){

echo"<script>alert('Data sudah ter-update');</script>";


}

}

?>

<html>

<head>

<title>Edit Mahasiswa</title>


function cek_data()

{

if(form1.npm.value=="")

{

alert("NPM tidak boleh kosong");

form1.npm.focus()



return false

}

if(form1.nama.value=="")

{

alert("Nama tidak boleh kosong");

form1.nama.focus()

return false

}

if(form1.tgl_lahir.value=="")

{

alert("Tgl Lahir tidak boleh kosong");

form1.tgl_lahir.focus()

return false

}

if(form1.jurusan.value=="")

{

alert("Jurusan belum dipilih");

form1.jurusan.focus()

return false

}

if(form1.alamat.value=="")

{

alert("Alamat tidak boleh kosong");

form1.alamat.focus()

return false

}

return true

}

</script>

</head>

<body>

<h2>Merubah Data Mahasiswa</h2>

<hr>

<form name="form1" method="post" action="<? $_SERVER['PHP_SELF']; ?>"



<tr>

<td width="19%">NPM</td>


<input name="npm" type="text" id="npm" size="8" maxlength="8"

value="<?=$row['npm']?>">

<input name="no" type="hidden" id="no" value="<?=$row['npm']?>">

</label></td>

</tr>

<tr>

<td>Nama</td>

<td><label>

<input name="nama" type="text" id="nama" size="30" maxlength="30"

value="<?=$row['nama']?>">

</label></td>

</tr>

<tr>

<td>Tgl Lahir (YYYY-MM-DD) </td>

<td><label>

<input name="tgl_lahir" type="text" id="tgl_lahir" size="10"

maxlength="10" value="<?=$row['tgl_lahir']?>">

</label></td>

</tr>

<tr>



<td>Jurusan</td>

<td><label>

<select name="jurusan" id="jurusan">

<option selected

value="<?=$row['jurusan']?>"><?=$row['jurusan']?></option>

<option value="MIF">MIF</option>

<option value="TIK">TIK</option>

<option value="AKE">AKE</option>

<option value="ARM">ARM</option>

<option value="MPRS">MPRS</option>

</select>

</label></td>

</tr>

<tr>

<td>Alamat</td>

<td><label>

<textarea name="alamat" cols="30" rows="2"

id="alamat"><?=$row['alamat']?></textarea>

</label></td>

</tr>

<tr>

<td> </td>

<td><label>

<input type="submit" name="Submit" value="Edit">

<input type="reset" name="Reset" value="Reset">

</label></td>

</tr>

</table>

</form>

</body>

</html>

D. Tugas

Buatlah rangkuman mengenai PhpMyadmin dan contoh penggunaannya. Silahkan untuk referensi buku tentukan sendiri. Kumpulkan dalam bentuk makalah dan dikerjakan perkelompok.

E. Evaluasi

Buatlah website untuk pengolahan data mata kuliah yang terdiri dari proses tambah, edit dan hapus record dari struktur dibawah ini :

Database : Akademik Table : Matakuliah No Field name Type Size Description

1 kd_mk char 10 Primary key

2 Mk char 30

3 Sks int



BAB V

PEMROGRAMAN WEB II

(PRAKTIKUM)


1 Mampu menerapkan Paging dan Searching

2 Mampu membuat halaman web untuk aplikasi upload file

3 Mampu membuat halaman web untuk aplikasi download file

4 Mampu membuat halaman login dan logout

B. Langkah-langkah Praktikum

1. Koneksi ke database MySQL Nama File : connection.php <?

$host="127.0.0.1";

$user="root";

$pwd="";

$db="akademik";




?>

2. Aplikasi Searching & Paging Nama File : page.php

Gambar 5.0 Pencarian Matakuliah



<html>

<head>

<title>Pencarian</title>


function cek_data()

{

if(form1.mk.value=="")

{

alert("Mata kuliah yang dicari tidak boleh kosong");

form1.mk.focus()

return false

}

return true

}

function MM_goToURL() { //v3.0

var i, args=MM_goToURL.arguments; document.MM_returnValue = false;

for (i=0; i<(args.length-1); i+=2)

eval(args[i]+".location='"+args[i+1]+"'");

}

//-->

</script>

</head>

<body>

<h2>DAFTAR MATAKULIAH</h2>

<form action="page.php" method="post" name="form1" id="form1"

onsubmit="return cek_data()">

Matakuliah

<label>

<input type="text" name="mk" />

</label>

<label>

<input type="submit" name="Submit" value="Search"/>

<input name="Refresh" type="button"

onclick="MM_goToURL('parent','page.php');return document.MM_returnValue"

value="Refresh" />

</label>

<input name="cari" type="hidden" id="cari" value="form1" />

</form>

<?

include "connection.php";

$limit=5;

$page=$_GET['page'];

if(empty($page)){

$position=0;

$page=1;

}else{

$position=($page-1)*$limit;

}

if((isset($_POST['cari']))&&($_POST['cari']=='form1')){

$mk=$_POST['mk'];

$sql="SELECT *FROM matakuliah WHERE mk like '%$mk%'”.

“LIMIT $position,$limit";

$rs=mysql_query("SELECT * FROM matakuliah");

}else{

$sql="SELECT *FROM matakuliah LIMIT $position,$limit";

$rs=mysql_query("SELECT * FROM matakuliah");

}



$result=mysql_query($sql);

$num_row=mysql_num_rows($result);

$num_row2=mysql_num_rows($rs);

$num_page=ceil($num_row2/$limit);

if($num_row > 0){

$no=$position+1;

echo"<table border=1>

<tr>

<td>No</td>

<td>Kode Matakuliah</td>

<td>Matakuliah</td>

<td>SKS</td>

</tr>";

while($row=mysql_fetch_array($result)){

echo "<tr>

<td>$no</td>

<td>$row[kd_mk]</td>

<td>$row[mk]</td>

<td>$row[sks]</td>

</tr>";

$no++;

}

echo "</table>";

echo "<br> Halaman : ";

for($i=1; $i<=$num_page; $i++)

if($i != $page){

echo"<a href=$_SERVER[PHP_SELF]?page=$i> $i </a> |";

}else{

echo "<b>$i</b> |";

}

echo "<p>Total :<b> $num_row2 </b> Matkuliah</p>";

}else{

echo "<script>alert('Data tidak ada');</script>";

echo"<script>location='page_1b.php';</script>";

}

?>

</body>

</html>

3. Membuat Aplikasi Upload dan Download File

Database : DBlatihan Table : upload_file

No Field name Type Size Description

1 id_upload int 3 Primary key & auto_increment

2 nama_file char 100

3 ukuran_file int 100

4 deskripsi text

5 Direktori char 100



Buatlah folder yang khusus untuk menampung file-file yang diupload, misalnya folder file.

Dan perlu diperhatikan folder tersebut sebaiknya diletakan difolder tempat disimpannya

skrip-skrip aplikasi upload.

Contoh :

• Folder upload untuk menyimpan skrip-skirp php

D:\xampp\htdocs\upload

• Folder file : folder baru untuk menyimpan file yang di upload

D:\xampp\htdocs\upload\file

� Nama File : form_upload_upload.php

Gambar 5.1 Desain Form upload

<html>

<head>

<title>Form upload</title>

</head>

<body>

<h2>UPLOAD FILE</h2>

<hr>

<form enctype="multipart/form-data" method="post" action="upload_1.php">

File yang di upload : <input type="file" name="fupload" /><br>

Deskripsi File : <br>

<textarea name="deskripsi" rows="8" cols="40"></textarea>

<br>

<input type="submit" value="upload">

</form>

</body>

</html>



� Nama File : upload_1.php

<?

//Baca variable lokasi, nama & ukuran file dari form

$lokasi_file=$_FILES['fupload']['tmp_name'];

$nama_file=$_FILES['fupload']['name'];

$ukuran_file=$_FILES['fupload']['size'];

$direktori="file/$nama_file";

//Apabila file berhasil diupload

if(move_uploaded_file($lokasi_file,"$direktori")){

echo "Nama File : <b>$nama_file</b> sukses di upload

<br>";

echo "Ukuran File : <b>$ukuran_file</b> bytes";

//Masukan informasi file ke database

mysql_connect("localhost","root","")or

die(mysql_error());

mysql_select_db("dblatihan");

$sql="INSERT INTO

upload_file(nama_file,ukuran_file,deskripsi,direktori)

VALUES('$nama_file','$ukuran_file','".$_POST['deskripsi']."','$dire

ktori')";

mysql_query($sql);

}else{

echo "File gagal diupload";

}

?>

� Nama File : download.php

<?

mysql_connect("localhost","root","");

mysql_select_db("dblatihan") or die(mysql_error());

$tampil="SELECT * FROM upload_file ORDER BY id_upload DESC";

$hasil=mysql_query($tampil);

while($data=mysql_fetch_array($hasil)){

echo "Nama File : <b>$data[nama_file]</b> <br>";

echo "Ukuran File : $data[ukuran_file] bytes <br>";

echo "Deskripsi : $data[deskripsi] <br>";

echo"<a href='$data[direktori]'>Dowload File</a><hr>";

}

?>



4. Membuat aplikasi login user Database : DBlatihan Table : user


1 id int 3 Primary key & auto_increment

2 username char 20

3 password char 20

4 email char 25

� Nama File : connection.php

<?

$host="127.0.0.1";

$user="root";

$pwd="";

$db="dblatihan";




?>

� Nama File : login.php

Gambar 5.2 Desain Form Login User

<html>

<head>

<title>LOGIN USER</title>


function cek_data()

{

if(form1.username.value=="")

{

alert("username tidak boleh kosong");

form1.username.focus()

return false

}

if(form1.password.value=="")

{

alert("password tidak boleh kosong");

form1.password.focus()

return false

}

return true



}

</script>

</head>

<body>

<h2>LOGIN USER</h2>

<hr>

<form name="form1" method="post" action="cek_login.php"



<tr>

<td width="33%">Username</td>


<input name="username" type="text" id="username" size="20"

maxlength="20">

</label></td>

</tr>

<tr>

<td>Password</td>

<td><label>

<input name="password" type="password" id="password"

size="20" maxlength="20">

</label></td>

</tr>

<tr>

<td colspan="2"><label>

<input type="submit" name="Submit" value="Login">

</label></td>

</tr>

</table>

</form>

</body>

</html>

� Nama File : cek_login.php <?



//SQL Statement

$sql="SELECT * FROM user WHERE

username='".$_POST['username']."' AND

password='".$_POST['password']."'";


$result=mysql_query($sql)or die(mysql_error());

$num_rows=mysql_num_rows($result);

$row=mysql_fetch_array($result);

//Apabila username & password ditemukan (valid)

if($num_rows>0){

session_start(); //untuk memulai session

//Daftarkan session ke server

session_register("namauser");

session_register("passuser");



//isi dari variabel session

$_SESSION['namauser']=$row['username'];

$_SESSION['passuser']=$row['password'];

//Membuka halaman utama

echo "<script>location='utama.php';</script>";

} else{

//Message Box username / password tidak benar

echo "<script>alert('Username / Password tidak benar');</script>";

//kembali ke halaman login

echo "<script>location='login.php';</script>";

}

?>

� Nama File : utama.php

<?

session_start();

if((empty($_SESSION['namauser'])) &&

(empty($_SESSION['passuser']))) {

echo "<script>alert('Untuk masuk ke halaman utama Anda

harus login');</script>";


}

?>

<html>

<head>

<title>Halaman Utamama</title>

</head>

<body>

<h3>Terimasih Anda sudah berhasil login...</h3>

Halaman ini hanya bisa diakses ketika Anda sudah LOGIN<br>

Anda login dengan username : <? echo $_SESSION['namauser']; ?><br>

<a href="logout.php">Klik disini </a>jika ingin logout

</body>

</html>

� Nama File : logout.php

<?

session_start();

session_destroy();

echo "<script>alert('Anda telah sukses keluar dari

sistem..,terimakasih');</script>";


?>



C. Tugas Buatlah rangkuman mengenai SESSION dan contoh-contohnya. Silahkan untuk referensi buku tentukan sendiri. Kumpulkan dalam bentuk makalah dan dikerjakan perkelompok.

D. Evaluasi Buatlah aplikasi login mahasiswa yang terdiri dari struktur table dibawah ini:

Database : db_npm anda Table : mahasiswa


1 Npm int 3 Primary key

2 Nama char 20

3 Password char 20

4 Jurusan char 20

Keterangan : • Butlah form login mahasiswa terdiri dari npm & password

• Buatlah script untuk cek login • Buatlah script untuk logout



DAFTAR PUSTAKA

1. Abdul Kadir, 2009, Membuat Aplikasi Web dengan PHP + Database MySQL, Yogyakarta : Penerbit Andi

2. Betha Sidik, Ir, 2001, Pemrograman Web PHP, Bandung : Penerbit Informatika 3. Lukmanul Hakim, 2008, Membongkar Trik Rahasia Para Master PHP,

Yogyakarta : Penerbit Lokomedia. 4. Lukmanul Hakim, 2009, Jalan Pintas Menjadi Master PHP, Yogyakarta :

Penerbit Lokomedia 5. Yuda Syahidin, ST. M.Kom, 2008, Modul Praktikum Pemrograman Web

Modul Pemrograman WEB

Documents

Transcript of Modul Pemrograman WEB