Modul Workshop Pembuatan Website - Update 02

MODUL
PEMBUATAN WEBSITE
Oleh :
Hamri Efendi, S.Kom
WORKSHOP PEMBUATAN WEBSITE

SMK N 1 MUARA MUNTAI
SEPTEMBER 2016
Modul Workshop Pembuatan Website
2
SMK N 1 Muara Muntai
A. PENDAHULUAN
Perkembangan teknologi selalu menuntut untuk terus di ikuti, karena jika
tidak maka akan tertinggal dan tentu saja akan kehilangan peluang untuk
bersaing. Perlahan tapi pasti, pemerintah pun telah dan sedang melakukan
migrasi ke sistem terkomputerisasi.
Lembaga-lembaga pemerintahan sekarang banyak yang telah meluncurkan

website guna untuk melayani masyarakat agar masyarakat dapat dengan
mudah mendapatkan informasi-informasi terbaru.
Terlebih lagi bagi perusahaan, baik besar maupun kecil, sekarang mau tidak
mau harus memiliki website guna untuk memberikan kepercayaan kepada
masyarakat serta mempromosikan dan memasarkan produk yang dijual.
Dengan menggunakan website, transaksi antara pengusaha dan pelanggan
bisa dengan mudah dilakukan. Mudah, Tepat, dan Cepat.
Pembuatan website merupakan sebuah peluang yang harus diambil. Dan

keahlian dalam pembuatan website harus dikuasai. Keahlian dalam
membuat website haruslah dimiliki oleh setiap siswa yang memilih bidang
IT (Information Technology).
B. TAHAP-TAHAP PEMBUATAN WEBSITE

1. Kumpulkan dan Pelajari
Tahap pertama dalam membuat situs web adalah mengumpulkan
informasi sebanyak mungkin, untuk mempelajari apa saja yang Anda
inginkan (dan tidak inginkan) bagi situs web Anda. Anda bisa
melakukannya dengan melihat situs web yang saat ini Anda gunakan,
bersama dengan pesaing Anda, dan meminta tanggapan dari teman-
teman dan rekan-rekan bisnis.
Seperti perusahaan-perusahaan lain, Anda bisa memilih untuk
menggunakan jasa perancang web yang berpengalaman untuk membuat
situs web Anda. Bersiaplah untuk menjawab pertanyaan-pertanyaan
penting, karena jawaban-jawaban tersebut diperlukan untuk membuat
“ringkasan kreatif”. Ringkasan kreatif akan berfungsi sebagai panduan
atau acuan dalam membuat situs web. Tersepas dari apakah Anda
menggunakan perusahaan perancang atau tidak, Anda harus
mengetahui jawaban atas pertanyaan-pertanyaan berikut :
Tujuan
Apa tujuan dari situs web saya? Apakah saya menyediakan
layanan, produk, informasi, atau data?
Sasaran
Tindakan apa yang saya inginkan dari para pengunjung saat
mengunjungi situs web saya?
Target Pengunjung
Siapa yang ingin saya capai? Bagaimana demografi
Hamri Efendi, S.Kom

hamri-efendi.blogspot.co.id | hamrie06@gmail.com | 0852 5046 1586
3
pengunjung saya?
Konten
Jenis informasi apa yang akan dicari oleh pengunjung? Apakah
mereka mencari informasi spesifik, produk tertentu, atau
pemesanan secara online?
2. Perencanaan
Informasi yang Anda kumpulkan pada Tahap 1 akan sangat membantu
perencanaan situs web Anda. Tindakan yang harus dilakukan sekarang
adalah:
 Membuat peta situs.
Catat semua bidang topik utama situs
web Anda, termasuk sub-topiknya, untuk
mengembangkan sistem navigasi yang
konsisten dan mudah untuk dipahami.
 Memutuskan teknologi apa yang Anda

butuhkan.
Menentukan apa saja yang Anda
butuhkan, seperti formulir interaktif,
aplikasi flash dan/atau sistem
manajemen konten (CMS).
 Menentukan resolusi tampilan yang

bisa diterima.
Seiring dengan peningkatan pemakaian
perangkat mobile, Anda mungkin ingin
mempertimbangkan rancangan yang
bersifat responsif. Pendekatan ini
memungkinkan sebuah situs web
menyesuaikan tampilannya pada
berbagai resolusi layar, seperti desktop,
tablet PC, atau smartphone.
 Membuat mock-up.
Luangkan waktu untuk mengatur tata
letak halaman berdasarkan pola
rancangan dasar yang ada. Langkah ini
akan membantu Anda memvisualisasikan
rancangan dan memberikan kerangka
kerja bagi situs web Anda.
 Rencanakan konten Anda.

Mengetahui apa saja yang ingin Anda
komunikasikan dan berapa banyak
konten yang Anda miliki akan membantu
memandu proses perancangan.
Hamri Efendi, S.Kom

4
3. Rancangan
Jika Anda sudah menguraikan rincian-rincian dalam Tahap 1 dan 2,
maka perancangan halaman beranda dan semua sub halaman
berikutnya tidak terlalu rumit. Misalnya, dengan mengetahui demografi
pengunjung situs web adalah wanita lajang, kelas menengah, usia 18
hingga 24 tahun, dengan jenjang pendidikan perguruan tinggi
dibandingkan dengan pria yang telah menikah, kelas atas, usia 65
hingga 80 tahun, pensiunan, pasti akan memengaruhi elemen dan
aplikasi perancangan yang digunakan.
Visi Anda terhadap situs web akan terasa hidup dengan melihat tata
letak halaman dengan isi dan foto sungguhan, bersama dengan logo dan
warna-warni yang tertata. Gunakan waktu yang ada untuk membuat
perubahan-perubahan yang diperlukan! Jika Anda menggunakan jasa
perancang berpengalaman, mereka akan menyediakan mock-up atau
prototipe dalam beberapa tahap pengembangan untuk mendapatkan
tanggapan dari Anda. Perubahan akan semakin mahal dan implementasi
akan semakin sulit diterapkan pada tahap-tahap selanjutnya. Gunakan
waktu pada tahapan ini dengan bijaksana.
4. Pengembangan
Setelah rancangan dilakukan dan disetujui, maka proses pembuatan
situs web bisa dimulai. Perancang/pengembang akan mengambil semua
elemen grafis individu dari prototipe dan menggunakannya untuk
membuat situs web yang fungsional. Elemen interaktif seperti formulir
kontak, animasi flash, dan kereta belanja akan diimplementasikan pada
Hamri Efendi, S.Kom

5
tahapan ini. Selama tahapan ini, Anda bisa membuat perubahan dan
koreksi berskala kecil.
5. Pengujian, Pengiriman, dan Peluncuran

Pengembang situs web akan menguji situs web Anda, dari kelengkapan
fungsinya hingga masalah kompatibilitas. Selain itu, pengembang akan
memastikan bahwa semua kode pemrograman yang ditulis untuk
validasi situs web Anda memenuhi standar pemrograman web yang ada
saat ini.
Setelah persetujuan akhir diberikan, berkas-berkas situs web akan

diunggah ke server Anda, dan situs web tersebut bisa langsung diakses
oleh publik.
Hamri Efendi, S.Kom

6
6. Pemeliharaan
Tak kalah penting adalah proses pemeliharaan situs web Anda. Selama
tahap perencanaan proses ini, Anda sudah menentukan apakah proses
pemeliharaan situs web akan dilakukan secara internal atau
dialihdayakan kepada pihak ketiga (seperti perancang situs web Anda).
Jika Anda memutuskan untuk memegang kendali penuh, perancang
harusnya telah membuat halaman CMS situs web untuk memberikan
kemampuan menyunting isi situs web serta menambah halaman baru.
Pengembangan situs web Anda tidak berhenti pada tanggal peluncuran

semata. Layaknya bangunan fisik, Anda harus mengambil langkah-
langkah pemeliharaan untuk memastikan bahwa situs web Anda aman
dan berjalan secara optimal. Pelajari Bagaimana Cara Menarik
Pengunjung Kembali ke situs web Anda dan Bagaimana Cara
Mengoptimalkan Situs Web Bisnis Kecil Anda ke peringkat yang lebih
tinggi pada mesin pencari.
C. PERSIAPAN
Adapun perangkat-perangkat yang harus disiapkan adalah :
1. Komputer  PC, Notebook, Netbook
2. Web Browser  Mozilla Firefox, Chrome, UC Browser, dll.
3. Text Editor  EditPlus, Notepad++, dll.
4. Web Server  XAMPP
5. Macromedia Dreamweaver 8
Hamri Efendi, S.Kom

7
D. DESAIN
Standar desain halaman website memuat komponen berikut :
1. Header
Memuat informasi tentang perusahaan atau lembaga pemilik website
2. Menu
Memuat informasi tentang menu-menu yang disajikan dalam website.
3. Konten
Memuat informasi yang di publish oleh pemilik website
4. Footer
Memuat informasi pengembang website
HEADER
MENU
KONTEN
FOOTER
Hamri Efendi, S.Kom

8
BELAJAR DESAIN DENGAN HTML
1. Struktur halaman HTML

<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
Hallo World...!!!
</body>
</html>
Hasil :
2. Tag Body dan Atributnya

1) Menambahkan background warna
Ubah Tag Body seperti dibawah ini :
<body bgcolor=”yellow”>
Hasil :
Warna bisa diganti sesuai dengan keinginan, cukup dengan

menuliskan nama warna dalam bahasa Inggris. Atau bisa juga
menuliskan warna dengan notasi heksadesimal.
Hamri Efendi, S.Kom

9
2) Menambahkan background gambar

<body background="gambar/Penguins.jpg">
Hasil :
Background bisa diganti sesuai dengan keinginan dengan cara

menuliskan lokasi gambar. Perlu diperhatikan bahwa dalam
penulisan lokasi ini harus tepat pada lokasi penyimpanan gambar
serta nama gambar dan juga ekstensi gambar.
3) Pesan ketika halaman dibuka

<body background="gambar/Penguins.jpg" onLoad="alert('Selamat
Datang')">
Hasil :
Hamri Efendi, S.Kom

10
3. Membuat Format Text Judul

<html>
<head>
<title>Belajar HTML 2</title>
</head>
<body>
<h1>Judul Level 1</h1>
</body>
</html>
Hasil :
4. Mengatur Format Font

<html>
<head>
<title>Belajar HTML - Format Font</title>
</head>
<body>
<font size="5" face="Arial" color="red">
Bentuk text arial berwarna merah
</font>
</body>
</html>
Hamri Efendi, S.Kom

11
Hasil :
5. Menampilkan Gambar
<html>
<head>
<title>Belajar HTML - Menampilkan Gambar</title>
</head>
<body>
<img src="gambar/Penguins.jpg" width="50%"
alt="ini gambar" />
</body>
</html>
Hasil :
Hamri Efendi, S.Kom

12
6. Format Text
<html>
<head>
<title>Belajar HTML - Format Text</title>
</head>
<body>
<b>Ini Text Bold - Tebal</b><br>
<i>Ini Text Italic - Miring</i><br>
<u>Ini Text Underline - Garis Bawah</u><br>
<s>Ini Text Striketrue - Garis Tengah</s><br>
Text Superscript : X<sup>2</sup><br>
Text Subscript : H<sub>2</sub>O<br>
</body>
</html>
Hasil :
7. Membuat Garis
<html>
<head>
<title>Belajar HTML - Membuat Garis Dalam
Dokumen</title>
</head>
<body>
<h1 align="right">Ini Adalah Garis</h1>
<hr align="right" width="60%" color="#FF0000"
size="3">
</body>
</html>
Hamri Efendi, S.Kom

13
Hasil :
8. Membuat Link
<html>
<head>
<title>Belajar HTML - Membuat Link</title>
</head>
<body>
<a href="latihan_01.html">Halaman Latihan 01</a><br>
<a href="http://hamri-efendi.blogspot.co.id">Blog
Hamri Efendi</a>
</body>
</html>
Hasil :
Hamri Efendi, S.Kom

14
9. Membuat Animasi Text Bergerak

<html>
<head>
<title>Belajar HTML - Membuat Animasi Text
Bergerak</title>
</head>
<body>
<marquee behavior="alternate"
bgcolor="#33FFCC">Amnimasi Marquee (Alternate)</marquee>
<br><br>
<marquee behavior="scroll" bgcolor="#33FFCC"
direction="left">Amnimasi Marquee (Scroll)</marquee>
<br><br>
<marquee behavior="slide" bgcolor="#33FFCC">Amnimasi
Marquee (Slide)</marquee>
<br><br>
</body>
</html>
Hasil :
10. Membuat List (Daftar)

Ada 3 jenis list dalam dokumen HTML yaitu :
1. Ordered List <OL>
Tag <ol> adalah kependekan dari Ordered List, yang artinya list
secara berurutan. List yang ditampilkan nanti oleh tag ini akan
menampilkan nomor disebelah kiri dari detail.
<html>
<head>
<title>Belajar HTML - Membuat List OL</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ol>
Hamri Efendi, S.Kom

15
<li>Memasak</li>
<li>Cuci Piring</li>
<li>Cuci Baju</li>
<li>Mandi</li>
<li>Sarapan</li>
<li>Berangkat Sekolah</li>
</ol>
</body>
</html>
Hasil :
Secara standar List akan membentuk urutan angka. Jika ingin

mengubah bentuk urutan maka tambahkan atribut Type pada tag
OL.
2. Unordered List <UL>

Unordered List merupakan pengurutan list dengan
menggunakan symbol/bullet. Cara membuatnya sama dengan
Ordered List hanya saja tag <ol> diganti dengan tag <ul>.
<html>
<head>
<title>Belajar HTML - Membuat List UL</title>
</head>
<body>
<ul>
<li>Memasak</li>
<li>Cuci Piring</li>
<li>Cuci Baju</li>
<li>Mandi</li>
<li>Sarapan</li>
<li>Berangkat Sekolah</li>
</ul>
Hamri Efendi, S.Kom

16
</body>
</html>
Hasil :
3. List Tanpa Bullet <DL>

Untuk membuat list tanpa mengunakan bullet/symbol caranya
sama persis dengan pembuatan list dengan tag ol/ul, hanya
saja tag <ul> diganti dengan <dl> lalu tag <li> diganti dengan <dd>
<html>
<head>
<title>Belajar HTML - Membuat List DL</title>
</head>
<body>
<dl>
<dd>Memasak</dd>
<dd>Cuci Piring</dd>
<dd>Cuci Baju</dd>
<dd>Mandi</dd>
<dd>Sarapan</dd>
<dd>Berangkat Sekolah</dd>
</dl>
</body>
</html>
Hamri Efendi, S.Kom

17
Hasil :
11. Membuat Table

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris.
Umumnya setiap kolom menunjukan data yang sejenis, dan setiap
baris yang terdiri atas kolom-kolom menunjukan kelompok data dalam
satu kesatuan. Untuk membuat tabel pada html menggunakan tag
<table> dan di akhiri dengan tag </table> lalu di dalam sebuah tag
<table> dan tag </table> dimasukan tag <tr> dan </tr> yang
bekerja sebagai baris pada tabel lalu di dalam sebuah <tr> dan </tr>
terdapat tag <td> dan </td> yang bekerja memberikan sebuah
kolom pada tabel. Selain tag <td> juga berlaku tag <th> yang berfungsi
untuk judul kolom. Untuk mengetahui garis tabel tersebut, kita
menggunakan atribut 'border' pada tag table.
<html>
<head>
<title>Belajar HTML - Membuat Table</title>
</head>
<body>
Daftar Siswa
<table border="1">
<tr>
<th>NO</th>
<th>NAMA</th>
<th>JENIS KELAMIN</th>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
<td>laki-laki</td>
</tr>
<tr>
<td>2</td>
<td>Indah</td>
Hamri Efendi, S.Kom

18
<td>perempuan</td>
</tr>
</table>
</body>
</html>
Hasil :
12. Menggabungkan Baris dan Kolom pada Table

<html>
<head>
<title>Belajar HTML - Menggabungkan Kolom dan
Baris</title>
</head>
<body>
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
</tr>
<tr>
<td colspan="2">
Baris 2, Kolom 1 dan Kolom 2
</td>
<td rowspan="2">
Baris 2 dan Baris 3, Kolom 3
</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
Baris 3 dan Baris 3,<br>
Kolom 1 dan Kolom 2
</td>
Hamri Efendi, S.Kom

19
</tr>
<tr>
</tr>
</table>
</body>
</html>
Hasil :
Hamri Efendi, S.Kom

20
LATIHAN
1. Buatlah Format List Seperti Dibawah Ini :
Bagian-Bagian Komputer:
 Hardware :
o Motherboard
o Processor
• Pentium
• AMD
• Zyrek, dll.
o Ram
• SD Ram
• DDR (I, II, III)
o Hardisk
• Sata
• IDE
o VGA
• Card
• AT
• GForce
• Onboad
o LAN
o DVD RW
o Floppy Disk
o Power Suply
 Softrware :
o Operating System:
• Windows
• XP
• Vista
• Seven
• Linux
• Ubuntu
• Debian, dll.
• Mac OS.
o Aplication
• Design
• Programing
• Office
• Word
• Power Point
• Excel
• Access, dll
Hamri Efendi, S.Kom

21
2. Buatlah Desain Tabel Seperti Dibawah Ini :

NILAI
NO NAMA KETERANGAN
UTS UAS RATA-RATA
1 Udin 90 90 90 LULUS
2 Ujang 80 80 80 LULUS
3 Isin 87 78 82,5 LULUS
4 Surisin 50 70 60 TIDAK LULUS
5 Icih 80 79 79,5 LULUS
3. Buat Desain Website Seperti Dibawah Ini :
Hamri Efendi, S.Kom

22
BELAJAR MEMPERINDAH TAMPILAN DENGAN CSS
Perintah CSS dituliskan didalam tag <style></style> dan diletakkan di

dalam tag <head>.
1. Menambahkan background
<style>
#header{
background:url('gambar/bgheader.png');
}
</style>
Hasil :
2. Modifikasi Header
<style>
#header{
background:url('gambar/bgheader.png');
}
#header table{
width:100%;
border-collapse:collapse;
}
#header td.logo{
width:100px;
}
#header td.title{
color:white;
text-align:center;
font-family:Tahoma;
}
#header td.title h1,h2{
Hamri Efendi, S.Kom

23
margin:0;
padding:0;
}
</style>
Hasil :
3. Modifikasi tampilan menu

#menu{
border:1px solid #009900;
background:#009900;
}
#menu ul{
margin:0;
padding:0;
margin-top:5px;
margin-bottom:5px;
}
#menu ul li{
display:inline;
border:1px solid #339900;
padding:5px;
background:#339900;
}
#menu ul li a{
color:white;
text-decoration:none;
}
#menu ul li:hover{
border:1px solid #00cc00;
background:#00cc00;
}
Hamri Efendi, S.Kom

24
Hasil :
4. Modifikasi sidebar
/* SIDEBAR */
#sidebar table{
border-collapse:collapse;
border-color:#3366ff;
font-family:Arial;
font-size:10pt;
}
#sidebar th{
background:#3366ff;
color:white;
padding:5px;
font-size:13pt;
}
#sidebar td{
padding:5px;
}
#sidebar ul{
margin:0;
padding:0;
padding-left:20px;
}
#sidebar img{
border-radius:5px;
}
Hamri Efendi, S.Kom

25
Hasil :
Hamri Efendi, S.Kom

26
E. PEMROGRAMAN
Dalam mempelajari pemrograman computer, bahasa pemrograman atau
compiler apapun yang digunakan, cara belajarnya haruslah secara
berurutan, yaitu :
1. Struktur Penulisan Program
2. Input dan Output (I/O)
3. Aritmatika
4. Seleksi Kondisi
5. Perulangan
6. Array
Dalam pemrograman website dengan PHP diperlukan Web Server agar

semua syntax yang dibuat atau dituliskan bisa diproses dan di lihat
hasilnya.
1) Install Aplikasi XAMPP
2) File yang dibuat untuk menuliskan syntax PHP harus disimpan dengan
ekstensi *.php
3) Semua file harus disimpan dalam folder htdocs. Standar lokasi
penyimpanannya adalah C:\xampp\htdocs
4) Untuk membuka file program yang sudah dibuat dengan web browser
dilakukan dengan cara mengetikkan url : http://localhost/[folder
aplikasi]/[nama file].
Contoh : http://localhost/latihan_web/index.php
BELAJAR PHP
1. Struktur halaman PHP
<?php
echo "Hello World...!!!";
?>
Hasil :
Hamri Efendi, S.Kom

27
2. Input dan Output

a. Membuat Form Input
<form method="post" action="">
Nama <input type="text" name="nama"
placeholder="Nama">
<input type="submit" value="Submit">
</form>
Hasil :
b. Memproses Form Input

<?php
$nama=$_POST['nama'];
echo "Hai ".$nama.", Selamat Datang.";
?>
Hasil :
Hamri Efendi, S.Kom

28
3. Aritmatika; Menghitung Luas

Buat file baru dengan nama latihan_03.php dan ketikkan kode
seperti dibawah ini :
<form method="post" action="latihan_03_proses.php">
<table>
<tr>
<td>Panjang</td>
<td>:</td>
<td><input type="text" name="panjang"
placeholder="Panjang"></td>
</tr>
<tr>
<td>Lebar</td>
<td>:</td>
<td><input type="text" name="lebar"
placeholder="Lebar"></td>
</tr>
<tr>
<td colspan="3" align="right"><input
type="submit" value="Submit"></td>
</tr>
</table>
</form>
Hasil :

Buatlah file baru dengan nama latihan_03_proses.php untuk
memproses inputan dan ketikkan kode dibawah ini :
<?php
$panjang=$_POST['panjang'];
$lebar=$_POST['lebar'];
$luas = $panjang * $lebar;

echo "Luas = ".$luas;
?>
Hamri Efendi, S.Kom

29
Hasil :
4. Seleksi Kondisi; Nilai Siswa

Buat file baru dengan nama latihan_04.php dan ketikkan kode
seperti dibawah ini :
<form method="post" action="latihan_04_proses.php">
<table>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama"
placeholder="Nama"></td>
</tr>
<tr>
<td>Nilai</td>
<td>:</td>
<td><input type="text" name="nilai"
placeholder="Nilai"></td>
</tr>
<tr>
<td colspan="3" align="right"><input
type="submit" value="Submit"></td>
</tr>
</table>
</form>
Hamri Efendi, S.Kom

30
Hasil :

Buatlah file baru dengan nama latihan_04_proses.php untuk
memproses inputan dan ketikkan kode dibawah ini :
<?php
$nama=$_POST['nama'];
$nilai=$_POST['nilai'];
if($nilai>=80){
$keterangan="SANGAT BAIK";
}elseif($nilai<80 && $nilai>=70){
$keterangan="BAIK";
$keterangan="CUKUP BAIK";
$keterangan="CUKUP";
}else{
$keterangan="KURANG";
}
?>
<table>
<tr>
<td>Nama</td>
<td>:</td>
<td><?php echo $nama; ?></td>
</tr>
<tr>
<td>Nilai</td>
<td>:</td>
<td><?php echo $nilai; ?></td>
</tr>
<tr>
<td>Keterangan</td>
<td>:</td>
<td><?php echo $keterangan; ?></td>
</tr>
Hamri Efendi, S.Kom

31
</table>
Hasil :
5. Perulangan
<?php
for($x=1;$x<=10;$x++){
echo "Angka ".$x."<br>";
}
?>
Hasil :
6. Array; Nama Hari

<?php
$hari=array("Senin", "Selasa", "Rabu", "Kamis",
"Jum'at", "Sabtu", "Minggu");
echo "Ini adalah hari ".$hari[1];
?>
Hamri Efendi, S.Kom

32
Hasil :
LATIHAN
1. Buatlah program untuk menghitung keliling.
2. Buatlah program untuk menghitung luas segitiga.
Hamri Efendi, S.Kom

33
F. DATABASE
1. Membuat Database
a. Buka Web Browser
b. Ketik URL : http://localhost/phpmyadmin
c. Klik Menu Databases
d. Pada kotak input Create database, ketikkkan nama database yang

di inginkan, dan klik tombol Create. Contoh nama database :
dtbs_smk.
Hamri Efendi, S.Kom

34
Database yang sudah dibuat
e. Klik database yang sudah dibuat (dtbs_smk) untuk memilih database

yang akan digunakan.
Hamri Efendi, S.Kom

35
f. Membuat Table
Database yang sudah dibuat belum dapat digunakan. Harus dibuat
table terlebih dahulu untuk data yang akan disimpan nanti.
Ketikkan nama table dan tentukan berapa kolom yang akan dibuat
dan klik tombol Go.
g. Membuat Kolom
Buatlah kolom seperti table dibawah ini.
NO NAMA KOLOM TIPE DATA PANJANG DATA
1 nis Varchar 10
2 nama Varchar 100
3 jenis_kelamin Varchar 10
4 kelas Varchar 5
Hamri Efendi, S.Kom

36
Setelah kolom dibuat sesuai table diatas, klik tombok Save.
Sampai disini, database dengan table siswa telah siap untuk

digunakan.
Hamri Efendi, S.Kom

37
2. Membuat Koneksi Ke Database

Buatlah file dengan nama koneksi.php dan ketikkan perintah dibawah
ini :
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$database = "dtbs_smk";
mysql_connect($hostname, $username, $password);

mysql_select_db($database);
?>
3. Menambah Data
a. Form Input Data
Buatlah file dengan nama tambah.php dan ketikkan perintah
dibawah ini :
<fieldset style="width:350px;">
<legend>Form Tambah Data</legend>
<form method="post" action="tambah_proses.php">
<table>
<tr>
<td>NIS</td>
<td>:</td>
<td><input type="text" name="nis" placeholder="NIS"></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama" placeholder="Nama"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>
<label>
<input type="radio" name="jenis_kelamin" value="Laki-Laki"> Laki-Laki
</label>
<label>
<input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan
</label>
</td>
</tr>
<tr>
<td>Kelas</td>
<td>:</td>
<td><input type="text" name="kelas" placeholder="Kelas"></td>
</tr>
<tr>
<td colspan="3" align="right">
<input type="submit" value="Simpan">
</td>
</tr>
</table>
</form>
</fieldset>
Hamri Efendi, S.Kom

38
Hasil :
b. Proses Data
Buatlah file dengan nama tambah_proses.php dan ketikkan perintah
dibawah ini :
<?php
//Memanggil file koneksi
include("koneksi.php");
//Deklarasi Variabel
$nis =$_POST['nis'];
$nama =$_POST['nama'];
$jenis_kelamin =$_POST['jenis_kelamin'];
$kelas =$_POST['kelas'];
//Perintah SQL untuk menambah data

$str_sql="INSERT INTO
siswa(nis,nama,jenis_kelamin,kelas)
VALUES('".$nis."','".$nama."','".$jenis_kelamin."','".$kelas
."')";
//Eksekusi perintah SQL

$hasil=mysql_query($str_sql) or die(mysql_error());
if($hasil==true){
echo "Data Berhasil Disimpan.";
}
?>
Hamri Efendi, S.Kom

39
Hasil :
Isi Form Tambah Data
Hasil Eksekusi setelah klik tombol Simpan.
Hamri Efendi, S.Kom

40
Data di database bertambah
Tambahkan minimal 10 data pada table siswa ini.
4. Menampilkan Data
Buatlah file dengan nama tampil_data.php dan ketikkan perintah
dibawah ini :
<legend>Tampil Data</legend>
<table border="1" width="100%">
<tr>
<th>NO</th>
<th>NIS</th>
<th>NAMA</th>
<th>KELAS</th>
</tr>
<?php
//Perintah SQL untuk menampilkan data

$str_sql="SELECT * FROM siswa";
//Eksekusi Perintah SQL

$data_sql=mysql_query($str_sql);
//Menampilkan semua data

$no=0;
while($baris = mysql_fetch_array($data_sql)){
$no++;
Hamri Efendi, S.Kom

41
echo "
<tr>
<td>".$no."</td>
<td>".$baris['nis']."</td>
<td>".$baris['nama']."</td>
<td>".$baris['jenis_kelamin']."</td>
<td>".$baris['kelas']."</td>
</tr>
";
}
?>
</table>
</fieldset>
Hasil :
5. Mengedit Data
a. Modifikasi halaman tampil_data.php seperti dibawah ini :
<tr>
<th>NO</th>
<th>NIS</th>
<th>NAMA</th>
<th>KELAS</th>
<th>AKSI</th>
</tr>
<?php



$no=0;
$no++;
Hamri Efendi, S.Kom

42
$edit="<a href='edit_data.php?nis=".$baris['nis']."'>EDIT</a>";
echo "
<tr>
<td>".$no."</td>
<td>".$edit."</td>
</tr>
";
}
?>
</table>
</fieldset>
Hasil :
b. Form Edit Data

Buatlah file dengan nama edit_data.php dan ketikkan perintah
dibawah ini :
<?php
$nis=$_GET['nis'];

$str_sql="SELECT * FROM siswa WHERE nis='".$nis."' limit
1";


$nis =$baris['nis'];
$nama =$baris['nama'];
$jenis_kelamin =$baris['jenis_kelamin'];
$kelas =$baris['kelas'];
}
Hamri Efendi, S.Kom

43
?>
<legend>Form Edit Data</legend>
<form method="post" action="edit_data_proses.php">
<table>
<tr>
<td>NIS</td>
<td>:</td>
<td><input type="text" name="nis" placeholder="NIS"
value="<?php echo $nis;?>"></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama"
placeholder="Nama" value="<?php echo $nama;?>"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input type="text" name="jenis_kelamin"
placeholder="Jenis Kelamin" value="<?php echo
$jenis_kelamin;?>"></td>
</tr>
<tr>
<td>Kelas</td>
<td>:</td>
<td><input type="text" name="kelas"
placeholder="Kelas" value="<?php echo $kelas;?>"></td>
</tr>
<tr>
<input type="submit" value="Simpan">
</td>
</tr>
</table>
</form>
</fieldset>
Hamri Efendi, S.Kom

44
Klik tombol EDIT
c. Proses Update Data

Buatlah file dengan nama edit_data_proses.php dan ketikkan
perintah dibawah ini :
<?php
$nis =$_POST['nis'];
$nama =$_POST['nama'];
$jenis_kelamin =$_POST['jenis_kelamin'];
$kelas =$_POST['kelas'];
//Perintah SQL untuk update data

$str_sql="UPDATE siswa SET nis='".$nis."',
nama='".$nama."', jenis_kelamin='".$jenis_kelamin."',
kelas='".$kelas."' WHERE nis='".$nis."' LIMIT 1";

if($hasil==true){
//redirect ke halaman tampil data
header("location:tampil_data.php");
}
?>
Hamri Efendi, S.Kom

45
Hasil :
Ubah data pada form
Klik tombol Simpan
6. Mengedit Data
a. Modifikasi halaman tampil_data.php seperti dibawah ini :
<tr>
<th>NO</th>
<th>NIS</th>
<th>NAMA</th>
<th>KELAS</th>
<th>AKSI</th>
</tr>
<?php


Hamri Efendi, S.Kom

46

$no=0;
$no++;
$edit="<a href='edit_data.php?nis=".$baris['nis']."'>EDIT</a>";
$hapus="<a href='hapus_data.php?nis=".$baris['nis']."'>HAPUS</a>";
echo "
<tr>
<td>".$no."</td>
<td>".$edit." | ".$hapus."</td>
</tr>
";
}
?>
</table>
</fieldset>
Hasil :
b. Proses Hapus Data

Buatlah file dengan nama hapus_data.php dan ketikkan perintah
dibawah ini :
<?php
$nis=$_GET['nis'];
//Perintah SQL untuk menghapus data

$str_sql="DELETE FROM siswa WHERE nis='".$nis."' limit 1";

if($hasil==true){
//redirect ke halaman tampil data
header("location:tampil_data.php");
}
?>
Hamri Efendi, S.Kom

47
Hasil :
Klik tombol HAPUS
7. Pencarian Data
a. Form Cari Data
Buatlah file dengan nama cari.php dan ketikkan perintah dibawah
ini :
<legend>Form Cari Data</legend>
<form method="get" action="cari_proses.php">
<table>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama" placeholder="Nama"></td>
</tr>
<tr>
<input type="submit" value="Cari">
</td>
</tr>
</table>
</form>
</fieldset>
Hasil :
Hamri Efendi, S.Kom

48
b. Proses Cari Data

Buatlah file dengan nama cari_proses.php dan ketikkan perintah
dibawah ini :
<legend>Hasil Pencarian Data</legend>
<tr>
<th>NO</th>
<th>NIS</th>
<th>NAMA</th>
<th>KELAS</th>
<th>AKSI</th>
</tr>
<?php
$nama=$_GET['nama'];

$str_sql="SELECT * FROM siswa WHERE nama='".$nama."'";


$no=0;
$no++;
$edit="<a
href='edit_data.php?nis=".$baris['nis']."'>EDIT</a>";
$hapus="<a
href='hapus_data.php?nis=".$baris['nis']."'>HAPUS</a>";
echo "
<tr>
<td>".$no."</td>
</tr>
";
}
?>
</table>
</fieldset>
Hamri Efendi, S.Kom

49
Hasil :
Isi Form Pencarian dan Klik tombol Cari
Hasil Pencarian
c. Proses Cari Data dengan cara berbeda

Modifikasi file cari_proses.php menjadi seperti dibawah ini :
<legend>Hasil Pencarian Data</legend>
<tr>
<th>NO</th>
<th>NIS</th>
<th>NAMA</th>
<th>KELAS</th>
<th>AKSI</th>
</tr>
<?php
$nama=$_GET['nama'];

$str_sql="SELECT * FROM siswa WHERE nama LIKE
'%".$nama."%'";
Hamri Efendi, S.Kom

50

$no=0;
$no++;
$edit="<a
href='edit_data.php?nis=".$baris['nis']."'>EDIT</a>";
$hapus="<a
href='hapus_data.php?nis=".$baris['nis']."'>HAPUS</a>";
echo "
<tr>
<td>".$no."</td>
</tr>
";
}
?>
</table>
</fieldset>
Hasil :
Isi Form Pencarian dan Klik tombol Cari
Hamri Efendi, S.Kom

51
Hasil Pencarian
LATIHAN
1. Buatlah table guru di database dengan spesifikasi kolom seperti dibawah
ini :
NO NAMA KOLOM TIPE DATA PANJANG DATA
1 nik Varchar 20
2 nama Varchar 100
3 mata_pelajaran Varchar 100
2. Buatlah program untuk data guru :

a. Menambah
b. Menampilkan
c. Mengedit
d. Menghapus
e. Mencari
Hamri Efendi, S.Kom

52
G. PENUTUP
Dalam kesempatan ini saya ingin mengucapkan terima kasih kepada guru-
guru dan pengurus SMK N 1 Muara Muntai khususnya kepada bapak
Kamaluddin, S.Pd selaku kepala sekolah SMK N 1 Muara Muntai yang telah
memberikan kesempatan kepada saya untuk berbagi ilmu dengan generasi-
generasi bangsa yang sangat membanggakan.
Permohonan maaf juga saya sampaikan apabila selama kegiatan Workshop

Pembuatan Website ini terdapat kekurangan ataupun kekeliruan dari saya
sebagai pemandu dalam kegiatan ini, itu merupakan kelemahan yang saya
miliki.
Dalam kegiatan Workshop Pembuatan Website yang dilaksanakan pada

tanggal 19 – 21 September 2016 diharapkan semua peserta bisa mengenal
tata cara pembuatan website. Desain, Pemrograman, sampai pengelolaan
Database.
Untuk menjadi Website Maker waktu 3-4 jam per hari selama 3 hari tentu
saja tidak cukup untuk belajar. Belajar dan berlatih secara terus menerus
itulah yang menjadi kunci kesuksesan untuk menjadi Website Maker.
Belajar membuat website tidak harus menunggu kegiatan workshop seperti

ini, dan juga tidak harus belajar didalam kelas. Sangat banyak tutorial-
tutorial yang ada di internet sebagai referensi dan panduan kita dalam
belajar membuat website. Silahkan jelajahi dunia maya dengan aktifitas-
aktifitas yang bermanfaat.
Semoga dalam kesempatan yang akan datang kita semua bisa bertatap
muka kembali dan berbagi ilmu dalam nuansa kekeluargaan yang sangat
indah. Amin Ya Robbal ‘Alamin.
Yakinkan Dengan Iman

Usahakan Dengan Ilmu
Sampaikan Dengan Amal
YAKUSA
Hamri Efendi, S.Kom


Modul Workshop Pembuatan Website - Update 02

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Workshop Pembuatan Website - Update 02

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL

WORKSHOP PEMBUATAN WEBSITE

Lembaga-lembaga pemerintahan sekarang banyak yang telah meluncurkan

Pembuatan website merupakan sebuah peluang yang harus diambil. Dan

B. TAHAP-TAHAP PEMBUATAN WEBSITE

Hamri Efendi, S.Kom

 Memutuskan teknologi apa yang Anda

 Menentukan resolusi tampilan yang

 Rencanakan konten Anda.

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

5. Pengujian, Pengiriman, dan Peluncuran

Setelah persetujuan akhir diberikan, berkas-berkas situs web akan

Hamri Efendi, S.Kom

Pengembangan situs web Anda tidak berhenti pada tanggal peluncuran

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

BELAJAR DESAIN DENGAN HTML

1. Struktur halaman HTML

2. Tag Body dan Atributnya

Warna bisa diganti sesuai dengan keinginan, cukup dengan

Hamri Efendi, S.Kom

2) Menambahkan background gambar

Background bisa diganti sesuai dengan keinginan dengan cara

3) Pesan ketika halaman dibuka

Hamri Efendi, S.Kom

3. Membuat Format Text Judul

4. Mengatur Format Font

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

9. Membuat Animasi Text Bergerak

10. Membuat List (Daftar)

Hamri Efendi, S.Kom

Secara standar List akan membentuk urutan angka. Jika ingin

2. Unordered List <UL>

Hamri Efendi, S.Kom

3. List Tanpa Bullet <DL>

Hamri Efendi, S.Kom

11. Membuat Table

Hamri Efendi, S.Kom

12. Menggabungkan Baris dan Kolom pada Table

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

2. Buatlah Desain Tabel Seperti Dibawah Ini :

3. Buat Desain Website Seperti Dibawah Ini :

Hamri Efendi, S.Kom

BELAJAR MEMPERINDAH TAMPILAN DENGAN CSS

Perintah CSS dituliskan didalam tag <style></style> dan diletakkan di

Hamri Efendi, S.Kom

3. Modifikasi tampilan menu

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

Dalam pemrograman website dengan PHP diperlukan Web Server agar

Hamri Efendi, S.Kom

2. Input dan Output

b. Memproses Form Input

Hamri Efendi, S.Kom

3. Aritmatika; Menghitung Luas

b. Memproses Form Input