Tutorial Web Desain Profesional

MENGENAL MYSQL

I. Jalankan Xampp

II. Dfd
a. dfdd

D:\xampp\mysql\bin
C:\User\PC-27>
C:\User\PC-27>CD ..
C:\User> Cd ..
C:\> D:
D:\>CD Xampp
D:\Xampp>cd mysql
D:\Xampp\mysql>cd bin
D:\Xampp\mysql\bin>

D:\Xampp\mysql\bin>mysql –u root

MariaDB[<none>]> show databases;

b. Membuat Database Baru

MariaDB[<none>]> create database pendaftaran;
Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page |1
 Tutorial Web Desain Profesional
MariaDB[<none>]> show databases;

c. Membuat Tabel baru

MariaDB[<none>]> use bukutamu;
MariaDB[bukutamu]> create table t_submit(
->no int(3),
->name varchar(35),
->email varchar(30),
->pesan text,
->salary int,
->primary key(no));

Menambahkan kode unik (unique)

MariaDB[bukutamu]> create table t_submit(
->no int(3),
->name varchar(35),
->email varchar(30),
->pesan text,
->salary int,
->primary key(no);
-> UNIQUE (no,neme));

MariaDB[<none>]> show tables;

Melihat struktur table.

MariaDB[<none>]> desc t_submit;

Menghapus field dalam table

MariaDB[<none>]> alter table t_submit drop salary;

MariaDB[<none>]> desc t_submit;

Menambah nama Field kedalam table

MariaDB[<none>]> alter table t_submit add alamat varchar(50);

Merubah nama table

MariaDB[<none>]> rename table t_submit to t_bukutamu;

Menghapus Table
MariaDB[<none>]> drop table t_submit;

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page |2

 Tutorial Web Desain Profesional
Menghapus Database
MariaDB[<none>]> drop database bukutamu;

d. Mengisi Tabel baru

MariaDB[<none>]> insert into t_submit values(“1”,”ahmad”,”web@gmail.com”,”Tes”);

MariaDB[<none>]> select * from t_submit;

Merubah isi nama field

MariaDB[<none>]> update t_submit set
->name=”ahmad sofyan” where name=”ahmad”;

MariaDB[<none>]> select * from t_submit;

Menghapus isi baris pada table

MariaDB[<none>]> delete from t_submit where no=”2” ;

Menampilkan Isi Tabel

MariaDB[<none>]> select * from t_submit;

MariaDB[<none>]> select * from t_submit;

select * from anggota;
select nomor, nama from anggota;
select * from anggota where kota=’Surabaya’;
select * from anggota order by nama;
select count(*) from anggota;
select distinct kota from anggota;
select nama,email from anggota where email like ‘%yahoo.com’;
select nomor, nama, email from anggota where nomor >= 103 AND nama like ‘S%’;

Menampilkan Baris tertentu dalam tabel

MariaDB[<none>]> select no,name from t_submit;

Menampilkan nama yang sama dalam tabel

MariaDB[<none>]> select * from t_submit where name=”ahmad sofyan”;

Menampilkan harga barang 2500 dan 5000

MariaDB[<none>]> select * from t_submit t-barang where harga between 2500 and 5000;

Mencari seleruh nama ahmad sofyan dalam tabel

MariaDB[<none>]> select * from t_submit where name like ‘%ahmad sofyan%’;

Menampilkan data pada table secara berututan (asc=ascending, desc=descendint)

MariaDB[<none>]> select * from t_submit order by name asc;
Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page |3
 Tutorial Web Desain Profesional

Mengelompokan data dalam sebuah table

MariaDB[<none>]> select * from t_submit group by name;

Menampilkan data sesui dengan data statistic

MariaDB[<none>]> select count(*) from t_submit;
MariaDB[<none>]> select sum(name) from t_submit;

Mencari data berdasarkan karakter sebelah kiri

MariaDB[<none>]> select * from t_submit where left(name,1)=”a”;

Mencari data berdasarkan karakter sebelah kanan

MariaDB[<none>]> select * from t_submit where right(name,1)=”n”;

Mencari data berdasarkan karakter sebelah tengah

MariaDB[<none>]> select * from t_submit where mid(name,2,1)=”m”;

Mencari data maksimal dalam tabel

MariaDB[<none>]> select max(harga) from t_barang;
MariaDB[<none>]> select min(harga) from t_barang;

Menampilkan data semua mahasiswa yang beralamat di luar Jakarta Selatan

Ex:
SELECT * FROM mhs WHERE alamat != 'Jakarta Selatan';

Menampilkan data semua mahasiswa yang beralamat di Jakarta Selatan dan

lahir pada tahun 1982.
Ex:
SELECT * FROM mhs WHERE alamat = 'Jakarta Selatan' && YEAR(tgllahir) = '1982';

Menampilkan nim, nama dan umur dari semua mahasiswa.

Ex:
SELECT nim, nama, YEAR(now())-YEAR(tgllahir) AS umur FROM mhs;

Menampilkan semua data mahasiswa secara urut berdasarkan nama dengan

perintah ORDER BY
ex:
SELECT * FROM mhs ORDER BY nama;

Menampilkan semua data mahasiswa secara urut berdasarkan nim secara

DESCENDING
Ex:
SELECT * FROM mhs ORDER BY nim DESC;

Menampilkan 5 record (data) pertama dari tabel mhs secara urut berdasarkan
nim dengan LIMIT
Ex:
SELECT * FROM mhs ORDER BY nim LIMIT 0,5;

Menambah field baru

ALTER TABLE nama_tabel ADD field_baru tipedata(panjang_data);
ALTER TABLE nama_tabel ADD field_baru tipedata(panjang_data) FIRST;
ALTER TABLE nama_tabel ADD field_baru tipedata(panjang_data) AFTER

Example:
ALTER TABLE mhs ADD agama varchar(15) NOT NULL;

Merubah nama tabel

ALTER TABLE nama_tabel RENAME TO nama_tabel_baru;

Merubah nama dan tipe data field yang sudah ada dengan query „CHANGE’
ALTER TABLE nama_tabel CHANGE field_lama field_baru tipedata(panjang data);

Merubah nama dan tipe data field yang sudah ada dengan query „MODIFY‟
ALTER TABLE nama_tabel MODIFY nama_field tipedata(panjang_data);

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page |4

 Tutorial Web Desain Profesional

Menambah nilai option (default, null, auto increment, unique) pada kolom
ALTER TABLE nama_tabel MODIFY nama_field tipedata(panjang_data) DEFAULT [nilai_tertentu];
ALTER TABLE nama_tabel MODIFY nama_field tipedata(panjang_data) NOT NULL;
ALTER TABLE nama_tabel MODIFY nama_field tipedata(panjang_data) AUTO_INCREMENT;
Ex:
ALTER TABLE mhs MODIFY agama char(2) NOT NULL;

Menambah primary key

ALTER TABLE nama_tabel ADD PRIMARY KEY(nama_field);
Ex:
ALTER TABLE mhs ADD PRIMARY KEY(nim);

Menghapus field
ALTER TABLE nama_tabel DROP nama_field;

Menghapus primary key

ALTER TABLE nama_tabel DROP PRIMARY KEY;
Menghapus auto increment
ALTER TABLE nama_tabel CHANGE nama_field nama_field tipedata(panjang_data)

Mengubah panjang field agama menjadi 10 karakter dalam tabel mhs

Ex:
ALTER TABLE mhs CHANGE agama agama varchar(10);

Mengubah Nama Tabel

Ex:
RENAME TABLE mhs TO mahasiswa; atau
ALTER TABLE mhs RENAME TO mahasiswa;

Mengubah alamat menjadi “Tangerang” untuk mahasiswa yang mempunyai

nim 0411500121
Ex:
UPDATE mhs SET alamat='Tangerang' WHERE
nim='0411500121';

Mengubah tanggal lahir menjadi “12 Maret 1983” dan alamat menjadi
“Jakarta Selatan” untuk mahasiswa yang mempunyai nim 0422500316
Ex:
UPDATE mhs SET tgllahir='1982-06-05', alamat='Jakarta
Selatan' WHERE nim='0422500316';

Menghapus data mahasiswa yang mempunyai nim 0411500331

Ex:
DELETE FROM mhs WHERE nim='0411500331';

Menghapus semua mahasiswa yang beralamat di “Bandung”

Ex:
DELETE FROM mhs WHERE alamat='Bandung';

Menggabungkan dua tabel menjadi satu tabel

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page |5

 Tutorial Web Desain Profesional

create view LaporanNilai as select

mahasiswa.nrp,mahasiswa.nama,mahasiswa.jurusan,matakuliah.matakuliah,
dosen.dosen,nilai.nilai,nilai.mutu
from matakuliah,dosen,nilai,mahasiswa
where nilai.nrp=mahasiswa.nrp
and nilai.kode=matakuliah.kode
and nilai.nip=dosen.nip;

SELECT employees.employee_id, employees.last_name, employees.department_id,

departments.department_id, departments.location_id
FROM employees, departments
WHERE employees.department_id = departments.department_id;

SELECT last_name, employees.department_id,

FROM employees, departments
WHERE employees.department_id = departments.department_id
AND last name = 'Matos‘;

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page |6

 Tutorial Web Desain Profesional
LOGIKA DATABASE
o Membuka koneksi ke server MySQL
$conn = mysql_connect (”host”,”username”,”password”);

o Memilih database
mysql_select_db(”namadatabase”,$conn);
o Memilih tabel dengan query
$hasil = mysql_query(”SQL Statement”);
o Mengambil record dari tabel
$row = mysql_fetch_array($hasil);
$row = mysql_fetch_assoc($hasil);
$row = mysql_fetch_row($hasil);

o Tutup koneksi
mysql_close($conn);

 Membuat query :
mysql_query(query,handle)
 Mengatahui jumlah field:
mysql_num_fields aksestable.php
(handle)
 Mengatahui jumlah record:
mysql_num_rows(handle)

 Untuk mengakses record hasil query:

baris=mysql_fetch_row(handle) akan mengembalikan array yang berisi seluruh kolom $baris[0],
$baris[1],…

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page |7

 Tutorial Web Desain Profesional

Perintah SQL untuk menambah record :

INSERT INTO namatabel VALUES (‘nilaifield1',‘nilaifield2‘,..)";

Perintah SQL untuk menghapus record :

DELETE FROM ‘namatabel’ WHERE ‘namafield’=‘nilaifield1‘AND ‘namafield’=‘nilai’OR …;

Update Data
UPDATE ‘namatabel’ SET ‘namafield’=‘nilaifield1‘ WHERE ‘namafield’=‘nilaifield2‘;

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page |8

 Tutorial Web Desain Profesional

UPLOAD FILE

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

<type="input type= hidden" name="MAX_FILE_SIZE" value="10000">
Nama File :
<input type="file" name=“file1" size="30"><br>
<input type="submit" value="Upload">
</form>

p_upload.php

Insert record untuk foto

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page |9

Tutorial Web Desain Profesional

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page | 10

 Tutorial Web Desain Profesional
BAB II
BELAJAR DASAR PHP

TAG DALAM PHP

Banyak cara untuk menyisipkan PHP dalam script HTML, ada berbagai macam bentuk tag yang dapat digunakan,
antara lain :
 Cara I
<?php menandai awal tag
...
?> menandai akhir tag
 Cara II
<? menandai awal tag
...
?> menandai akhir tag
 Cara III
<% menandai awal tag
...
%> menandai akhir tag
Cara ini sama dengan tag pada ASP. Opsi ini bisa dilakukan jika nilai asp_tags pada php.ini
bernilai on.
 Cara IV
<script language=”php”> menandai awal script
...
</script> menandai akhir script

Namun untuk lebih mudahnya, kita akan menggunakan cara II mulai sekarang dan seterusnya.

MEMBUAT KOMENTAR PADA SCRIP PHP

Ada kalanya kita sebagai pemrogram, karena banyaknya kode program atau variabel dalam program, perlu
menandai atau memberi komentar pada program. Komentar pada program merupakan tulisan pada program yang
tidak dieksekusi. Pada PHP, ada 3 macam cara penulisannya :
1. /* komentar */ Tulisan apapun yang berada di antara ’/*’ dan ’*/’ akan dianggap sebagai komentar. Cara seperti
ini sangat berguna dan efisien untuk pemberian komentar yang memakan banyak baris.

2. // komentar
Tulisan di baris yang sama setelah ’//’ akan dianggap sebagai komentar. Cara ini berguna untuk pemberian
komentar singkat yang tak lebih dari 1 baris saja.

3. # komentar
Sama seperti ’//’, tulisan di baris yang sama setelah ’#’ akan dianggap sebagai komentar. Cara ini berguna
untuk pemberian komentar singkat yang tak lebih dari 1 baris saja.

VARIABEL DAN TIPE DATA

Dalam PHP, penulisan variabel diawali dengan karakter ‘$’, kemudian diikuti dengan huruf sebagai karakter
pertama. Setelah itu, dapat dilajutkan dengan kombinasi huruf dan angka. Variabel tidak boleh mengandung spasi
maupun tanda baca di dalamnya, kecuali underscore (’_’).

Variabel pada PHP bersifat “case sensitif”, yang berarti Anda harus memperhatikan penulisan huruf besar dan
huruf kecil. Variabel $jumlah berbeda dengan $Jumlah.
Contoh penamaan variabel yang benar :
$nama_pemakai
$kota_3
$user1

Contoh penamaan variabel yang salah :

$nama pemakai
$3kota
$us\er1

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page | 11

 Tutorial Web Desain Profesional
LATIHAN – LATIHAN :
1. Program 1
<?php
echo "Hello, Nama saya PHP ";
?>

2. Program 2
<?php
$nim = "0411500400";
$nama = 'Chotimatul Musyarofah';
echo "NIM : " . $nim . "<br>";
echo "Nama : $nama";
?>

3. Program 3
<?php
$nim = "0411500400";
$nama = 'Chotimatul Musyarofah';
$umur = 23;
$nilai = 82.25;
$status = TRUE;
echo "NIM : " . $nim . "<br>";
echo "Nama : $nama<br>";
print "Umur : " . $umur; print "<br>";
printf ("Nilai : %.3f<br>", $nilai);
if ($status)
echo "Status : Aktif";
else
echo "Status : Tidak Aktif";
?>
Operator dalam PHP
Jenis Operator Operator Contoh Keterangan
Aritmatika + $a + $b Pertambahan
- $a - $b Pengurangan
* $a * $b Perkalian
/ $a / $b Pembagian
% $a % $b Modulus, sisa pembagian

1. Pemakaian Variabel
<HTML>
<HEAD>
<TITLE> Contoh Skrip PHP </TITLE>
<BODY>
<?
$nama = "Muhammad Faruq";
echo "$nama berkata \"Katakan namamu!\"";
?>
</BODY>
</HTML>

2. Operator Penugasan
<?
$a = 3;
$b = 7;
$a += 5;
$b = ($c = 11) + 3;
echo "Nilai variabel a adalah = $a";
echo "<BR>";
echo "Nilai variabel b adalah = $b";
echo "<BR>";
echo "Nilai variabel c adalah = $c";
?>

3. Operasi Aritmatika
<?
$a=10;
$b=3;
echo "\$a = $a <BR>";
Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page | 12
 Tutorial Web Desain Profesional
echo "\$b = $b <BR>";
echo '$a + $b = ';
print $a+$b;
echo "<BR>";
echo '$a - $b = ';
print $a-$b;
echo "<BR>";
echo '$a * $b = ';
print $a*$b;
echo "<BR>";
echo '$a / $b = ';
print $a/$b;
echo "<BR>";
echo '$a % $b = ';
print $a%$b;
?>

4. Struktur Kontrol : If
<?
$a = 5;
$b = 7;
if ($a < $b)
{
echo "\$a lebih kecil daripada \$b";
}
?>

5. Struktur Kontrol : If - else

<?
$a = 5;
$b = 3;
echo "\$a = $a <BR>";
echo "\$b = $b <BR>";
if ($a < $b)
{
echo '$a lebih kecil daripada $b';
}
else
{
echo '$a lebih besar daripada $b';
}
?>

6. Struktur Kontrol : Syntax if – else yang lain

<?
$a = 5;
$b = 7;
echo "\$a = $a <BR>";
echo "\$b = $b <BR>";
if ($a == $b):
echo '$s sama dengan $b';
elseif ($a > $b):
echo '$a lebih besar daripada $b';
else:
echo '$a lebih kecil daripada $b';
endif;
?>

7. Struktur Kontrol : Switch

<?
$a = 5;
switch ($a) {
Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page | 13
 Tutorial Web Desain Profesional
case 0:
echo '$a sama dengan 0';
break;
case 1:
echo '$a sama dengan 1';
break;
case 2:
echo '$a sama dengan 2';
break;
default:
echo '$a tidak sama dengan 0, 1, atau 2';
}
?>

8. Struktur Kontrol : while

<?
echo "<H3> Cara 1 </H3>";
$i = 1;
while ($i <= 10)
{
print $i++;
}
echo "<BR>";
echo "<H3> Cara 2 </H3>";
$i = 1;
while ($i <= 10):
print $i;
$i++;
endwhile;
?>

9. Struktur Kontrol : do...while

<?
$i = 2;
do
{
echo "\$i = $i <BR>";
$i++;
}
while ($i < 5);
?>

10. Struktur Kontrol : for

<?
for ($i=1;$i<=10;$i++) {
print $i;
}
?>
11. Struktur Kontrol : break
<?
for ($i = 1; $i <= 10; $i++) {
if ($i == 6) {
break;
}
echo "\$i = $i <BR>";
}
?>
12. Struktur Kontrol : continue
<?
for ($i = 1;$i <= 10;$i++) {
if (!($i%2)) {
continue;
}
echo "\$i = $i <BR>";
}
Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page | 14
 Tutorial Web Desain Profesional
?>
13. Program if.php
<?php
$nilai = 80;
if ($nilai >= 60) {
echo "Nilai Anda $nilai, Anda LULUS";
}
?>
14. Program if_else.php
<?php
$nilai = 50;
if ($nilai >= 60) {
echo "Nilai Anda $nilai, Anda LULUS";
} else {
echo "Nilai Anda $nilai, Anda GAGAL";
}
?>
15. Program if_else2.php
<?php
$user = "achmatim";
$pass = "123"
if ($user == "achmatim" && $pass == "123") {
echo "Login Berhasil";
} else {
echo "Login Gagal";
}
?>

16. Program if_var.php

<?php
$user="";
if (!isset($user)) {
echo "Variabel tidak ada/belum terbentuk";
} else {
echo "Variabel ada";
}
?>
17. Program switch.php
<?php
$day = date ("D");
switch ($day) {
case 'Sun' : $hari = "Minggu"; break;
case 'Mon' : $hari = "Senin"; break;
case 'Tue' : $hari = "Selasa"; break;
case 'Wed' : $hari = "Rabu"; break;
case 'Thu' : $hari = "Kamis"; break;
case 'Fri' : $hari = "Jum'at"; break;
case 'Sat' : $hari = "Sabtu"; break;
default : $hari = "Kiamat";
}
echo "Hari ini hari <b>$hari</b>";
?>
18. Program if_khusus.php
<?php
$tahun = date ("Y");
$kabisat = ($tahun%4 == 0) ? "KABISAT" : "BUKAN KABISAT";
echo "Tahun <b>$tahun</b> $kabisat";
?>

19. Program for.php

<?php
/* contoh 1 */
for ($i = 1; $i <= 10; $i++) {

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page | 15

 Tutorial Web Desain Profesional
echo "$i ";
}
echo "<br><br>";
/* contoh 2 */
for ($i = 1; ; $i++) {
if ($i > 10) {
break;
}
echo "$i ";
}
echo "<br><br>";
/* contoh 3 */
$i = 1;
for (; ; ) {
if ($i > 10) {
break;
}
echo "$i ";
$i++;
} echo "<br><br>";
/* contoh 4 */
for ($i = 1; $i <= 10; print "$i ", $i++);
?>
20. Program dowhile.php
<?php
$i = 1;
do {
echo "$i ";
$i+=2;
} while ($i <= 20);
?>
21. Program break.php
<?php
for ($i=1; $i<10; $i++) {
if ($i == 5)
continue;
if ($i == 8)
break;
echo "$i ";
}
?>

BAB II
PENANGAN FORM

 Berbagai Cara Penanganan Form

 Form Input Type TEXT dan PASSWORD
 Form Input Type RADIO
 Form Input Type CHECKBOX
 Form Input Type COMBO BOX

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page | 16

 Tutorial Web Desain Profesional
 Form Input Type TEXTAREA

Form inputan dibuat dengan tag-tag HTML. Halaman yang mengandung form
murni (tidak ada script php) tidak harus disimpan dalam bentuk php, bisa dalam
bentuk html.

Untuk merancang sebuah form inputan, setidaknya ada 3 (tiga) hal penting, yi :
1. METHOD
Method dari sebuah form menentukan bagaimana data inputan form dikirim.
Method ini ada dua macam, yaitu GET dan POST. Method ini menentukan
bagaimana data inputan dikirim dan diproses oleh PHP.

2. ACTION
Action dari sebuah form menentukan dimana data inputan dari form diproses.
Jika action ini dikosongkan, maka dianggap proses form terjadi di halaman
yang sama. Jadi halaman form dan halaman proses bisa saja dipisah atau
dijadikan satu.

3. SUBMIT BUTTON
Submit button merupakan sebuah tombol (pada umumnya) yang berfungsi
sebagai trigger pengiriman data dari form inputan. Jika tombol ini ditekan,
maka data form akan dikirimkan (diproses) di halaman yang sudah ditentukan
pada atribut action.

Latihan membuat Form

1. Program input01.php
<html>
<head><title>Pengolahan Form</title></head>
<body>
<FORM ACTION="" METHOD="POST" NAME="input">
Nama Anda : <input type="text" name="nama"><br>
<input type="submit" name="Input" value="Input">
</FORM>
</body>
</html>
<?php
if (isset($_POST['Input'])) {
$nama = $_POST['nama'];
echo "Nama Anda : <b>$nama</b>";
}
?>

2. Program input02.php
<html>
<head><title>Pengolahan Form</title></head>
<body>
<FORM ACTION="proses02.php" METHOD="POST" NAME="input">
Nama Anda : <input type="text" name="nama"><br>
<input type="submit" name="Input" value="Input">
</FORM>
</body>
</html>

Program proses02.php
<?php
if (isset($_POST['Input'])) {
$nama = $_POST['nama'];
echo "Nama Anda : <b>$nama</b>";
}
?>
Form Input Type TEXT dan PASSWORD
1. Program input04.php
<html>
<head><title>Pengolahan Form ~ Text</title></head>
<body>
<FORM ACTION="proses04.php" METHOD="POST" NAME="input">

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page | 17

 Tutorial Web Desain Profesional
Sahabat-sahabat Dekatku<br>
<input type="text" name="nama1"><br>
<input type="text" name="nama2"><br>
<input type="text" name="nama3"><br>
<input type="text" name="nama4"><br>
<input type="submit" name="Input" value="Input">
</FORM>
</body>
</html>

Program proses04.php
<?php
if (isset($_POST['Input'])) {
$nama1 = $_POST['nama1'];
$nama2 = $_POST['nama2'];
$nama3 = $_POST['nama3'];
$nama4 = $_POST['nama4'];
echo "<b>Nama Sahabat-sahabat Dekatku :</b> <br>";
echo $nama1. "<br>";
echo $nama2. "<br>";
echo $nama3. "<br>";
echo $nama4. "<br>";
}
?>
2. Program menampilkan form login (inputan text dan password)
<html>
<head><title>Login Here</title></head>
<body>
<FORM ACTION="proses05.php" METHOD="POST" NAME="input">
<h2>Login Here...</h2>
Username : <input type="text" name="username"><br>
Password : <input type="password" name="password"><br>
<input type="submit" name="Login" value="Login">
<input type="reset" name="reset" value="Reset">
</FORM>
</body>
</html>

Program proses05.php
<?php
if (isset($_POST['Login'])) {
$user = $_POST['username'];
$pass = $_POST['password'];
if ($user == "achmatim" && $pass == "123") {
echo "<h2>Login Berhasil</h2>";
} else {
echo "<h2>Login Gagal</h2>";
}
}
?>

3. Program input06.php radio button

<html>
<head><title>Pilih Jurusan</title></head>
<body>
<FORM ACTION="proses06.php" METHOD="POST" NAME="input">
<h2>Pilih Jurusan Anda :</h2>
<input type="radio" name="jurusan" value="TI" checked>Teknik Informatika<br>
<input type="radio" name="jurusan" value="SI"> Sistem Informasi<br>
<input type="radio" name="jurusan" value="SK"> Sistem Komputer<br>
<input type="radio" name="jurusan" value="KA">Komputerisasi Akuntansi<br>
<input type="submit" name="Pilih" value="Pilih">
</FORM>
</body>
</html>

Program Proses06.php
<?php
if (isset($_POST['Pilih'])) {
$jurusan = $_POST['jurusan'];
echo "Jurusan Anda adalah
<b><font color='red'>$jurusan</font></b>";
}
?>

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page | 18

 Tutorial Web Desain Profesional

4. Program input07.php dengan check box.

<html>
<head><title>Band Favorit ~ Inputan Checkbox</title></head>
<body>
<FORM ACTION="proses07.php" METHOD="POST" NAME="input">
<h2>Pilih Band Favorit Anda :</h2>
<input type="checkbox" name="band01" value="Padi" checked> Padi<br>
<input type="checkbox" name="band02" value="Sheila On 7"> Sheila On 7<br>
<input type="checkbox" name="band03" value="Dewa 19">Dewa 19<br>
<input type="checkbox" name="band04" value="Ungu">Ungu<br>
<input type="submit" name="Pilih" value="Pilih">
</FORM>
</body>
</html>

Program proses07.php
<?php
if (isset($_POST['Pilih'])) {
echo "Band Favorit Anda adalah :<br>";
if (isset($_POST['band01'])) {
echo "+ " . $_POST['band01'] . "<br>";
}
if (isset($_POST['band02'])) {
echo "+ " . $_POST['band02'] . "<br>";
}
if (isset($_POST['band03'])) {
echo "+ " . $_POST['band03'] . "<br>";
}
if (isset($_POST['band04'])) {
echo "+ " . $_POST['band04'] . "<br>";
}
}
?>

5. Program input08.php dengan combo box

<html>
<head><title>Film Kartun Favorit ~ Inputan Combo
box</title></head>
<body>
<FORM ACTION="proses08.php" METHOD="POST" NAME="input">
<h2>Pilih Film Kartun Favorit Anda :</h2>
<select name="kartun">
<option value="Sponge Bob">Sponge Bob</option>
<option value="Sinchan">Sinchan</option>
<option value="Conan">Conan</option>
<option value="Doraemon">Doraemon</option>
<option value="Dragon Ball">Dragon Ball</option>
<option value="Naruto">Naruto</option>
</select>
<input type="submit" name="Pilih" value="Pilih">
</FORM>
</body>
</html>

Program proses08.php
<?php
if (isset($_POST['Pilih'])) {
$film = $_POST['kartun'];
echo "Film Kartun Favorit Anda adalah :
<font color=blue><b>$film</b></font>";
}
?>

6. Program input09.php dengan text area

<html>
<head><title>Kritik dan Saran ~ Inputan
Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page | 19
 Tutorial Web Desain Profesional
Textarea</title></head>
<body>
<FORM ACTION="proses09.php" METHOD="POST" NAME="input">
<h2>Input Kritik / Saran :</h2>
<textarea name="saran" cols="40" rows="5"></textarea><br>
<input type="submit" name="Proses" value="Input Saran">
</FORM>
</body>
</html>

7. Program proses09.php
<?php
if (isset($_POST['Proses'])) {
$saran = nl2br($_POST['saran']);
echo "Kritik / Saran Anda adalah : <br>";
echo "<font color=blue><b>$saran</b></font>";
}
?>

BAB III
BELAJAR HTML

BAB IV
CARA BELAJAR CSS

BAB V
MEMBUAT LAYOUT SEDERHANA

BAB VI
MEMBUAT DATABASE SEDERHANA

VII
MEMBUAT DATABASE WEBSITE

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page | 20

 Tutorial Web Desain Profesional

BAB IV
CARA MEMBUAT WEBSITE RESPONSIP
1. Buat file baru index
 File baru tersebut dengan nama “ index.php”
 Kemudia masukan skrip sebagai berikut

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="header">Untuk bagian header...</div>

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page | 21

 Tutorial Web Desain Profesional
<div class="main">
<div class="left">Untuk kolom bagian Kiri...</div>
<div class="middle">Untuk kolom bagian tengah...</div>
<div class="right">Untuk kolom bagian kanan...</div>
</div>
<div class="footer">Untuk bagian footer...</div>
</div>
</body>
</html>
 Simpan file css tersebut / CTRL + S

2. Bual File Css

 Kemudian Buat file baru dengan nama “css.css”
 Kemudia isikan scrip scc sebgai berikut
@charset "utf-8";
/* CSS Document */
.container{
max-width: 1080px;
margin: 20px auto;
background: #fff;
overflow: hidden;
padding: 10px;
}

.header{
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
}

/* Main */
.left{
width: 250px;
border: 1px solid #dedede;
background: #e5e5e5;
padding: 10px;
margin: 10px;
float: left;
}

.middle{
width: 500px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
}
.middle img{
max-width: 100%;
height: auto;
}

.right{
width: 250px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
}

.footer{
clear: both;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page | 22

 Tutorial Web Desain Profesional
}
.middle img{
max-width: 100%;
height: auto;
}

/* dfsfssf */
@media screen and (max-width: 1080px) {

.container {
width: 100%;
}
.left {
width: 25%;
background: #fff000;
}
.middle {
width: 68%;
float: right;
}

.right {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}
}
/* jjjjjj */
@media screen and (max-width: 780px) {

.header,
.footer{
text-align: center;
}
.left {
width: auto;
float: none;
}

.middle {
width: auto;
float: none;
}

.right {
width: auto;
float: none;
}

}
 Simpan file css tersebut / CTRL + S

3. Lik File Css Dengan Halaman Index

 Buka File Index.php
 Kemudian tambahkan File sebagai berikut di dalam tag Head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css.css" rel="stylesheet" type="text/css" />
  Simpan file css tersebut / CTRL + S

Copy @ bay:ahmad@gmail.com Team TKJ SMK KH Ghalib Pringsewu Page | 23