1. TUTORIAL WEB
“KEAJAIBAN ALAM”
DISUSUN OLEH :
NAMA : ARUM HERLIANTI FADHILA
KELAS : X RPL 1
NISN : 997
SMK NEGERI 1 DEPOK
Jl. Raya Tapos Gg. Bhakti Suci No.100
Kel Cimpaeun Kec Tapos-Depok, Jawa Barat
http :www.smkn1depok.sch.id email : info@smkn1depok.sch.id

2. Kata pengantar
Assalamualaikum wr wb
Puji dan syukur saya panjatkan kehadirat Allah swt, yang telah
melimpahkan rahmat dengan karunia nya untuk dapat menyelesaikan
pembuatan tutorial Aplikasi Web .
Saya mengucapkan terima kasih kepada guru bidang study yang
telah memberi kesempatan untuk membuat makalah ini.
Laporan ini dirangkai sedemikian rupa untuk mengajak kita semua
untuk mengenal, mempelajari, dan memahami pembuatan web. Tujuan
nya untuk memudahkan orang-orang membuat web sendiri dengan
mudah dan dengan langkah-langkah yang dibuat.
Tidak lebihnya mohon maaf jika rangkaian tugas pembuatan
Tutorial ini ada kekurangan dan kurang sempurna karena itu semua di
luar saya selaku pembuat makalah ini. Semoga dengan terbuatnya
makalah ini dapat menjadikan kita lebih tahu dan paham tentang
pembuatan web 
Sekian dan terimakasih
Wassalamualaikum wr wb

3. DAFTAR ISI
Halaman
LEMBAR PENGESAHAN ...........................................................................................ii
KATA PENGANTAR ...................................................................................................v
BAB I. INSTALASI SOFTWARE PENGEMBANG...........................................................1
1.1. XAMPP ......................................................................................................................... 1
BAB II. RANCANGAN APLIKASI .......................................................................................... 13
2.1. Flowchart ................................................................................................................... 18
BAB III. PEMBUATAN APLIKASI WEBSITE BERSERTA DATABASE..............................25
3.1.Membuat Page Menu 1 (Home)
3.2. Membuat Page Menu 2 (Profile)
3.3. Membuat Page Menu 3 (Galery)

4. BAB I
Instalasi Software Pengembang
1. XAMPP
Xampp kepanjangan dari yaitu Apache, PHP, MySQL, dan phpMyAdmin. XAMPP
merupakan tool yang menyediakan paket perangkat lunak ke dalam satu buah paket.
Dengan menginstal maka kita tidak perlu lagi melakukan instalasi dan konfigurasi web
server Apache, PHP, dan MySQL secara manual. XAMPP akan menginstalasi dan
mengkofigurasikan secara otomatis.
Cara menginstall XAMPP
1. Sebelum dimulai untuk XAMPP nya, Download xampp terlebih dahulu di website
http://www.apachefriends.org/en/xampp-windows.html pilih basic package untuk instalasi
tersebut.
2. Setelah sudah di download, lalu jalankan xampp nya.
3. Pilih bahasa lalu klik OK.
4. Pilih tujuan install xampp lalu klik next.
5. Pada window XAMPP options, kamu akan diminta memilih beberapa options seperti XAMPP
desktop, XAMPP start menu, dan XAMPP section. Abaikan saja pilihan tersebut, lalu klik
INSTALL.
6. Setelah instalasi selesai, jalankan XAMPP.
7. Lalu klik Start Apache dan Start MySQL.

5. 8. Web yang kita buat, akan beralamat di http://localhost, akses dengan browser sesuai selera
anda.
BAB II
Rancangan Aplikasi
2.1 Flowchart
Flowchart merupakan gambar yang memperlihatkan urutan dan hubungan proses
beserta intruksinya. Gambaran ini dinyatakan symbol dengan demikian setiap symbol
menggambarkan proses tertentu. Sedangkan hubungan antara proses digambarkan dengan
garis penghubung.
Flowchart merupakan langkah awal membuat program. Dengan adanya flowchart urutan
proses kegiatan lebih jelas. Jika ada penambahan proses maka dapat dilakukan lebih mudah.
Setelah flowchart selesai disusun, selanjutnya pemograman menerjemahkannya dengan
bahasa pemograman.
Symbol-simbol Flowchart
Flowchart disusun dengan symbol-simbol ini dipakai sebagai alat bantu menggambarkan
proses di dalam program.
Dalam pembuatan Flowchart tidak ada rumus atau patokan yang bersifat mutlak karena
flowchart merupakan gambaran hasil pemikiran dalam menganalisa suatu masalah dengan
computer sehingga flowchart yang dihasilkan dapat beragam antara satu pemograman
dengan pemograman lainnya.
Namun secara garis besar, setiap pengolahan selalu terdiri dari tiga bagian utama yaitu :
1. Input ialah bahan mentah.
2. Proses pengolahan
3. Output ialah bahan jadi.
Untuk mengolah data dengan computer, dapat dirangkum urutan dasar untuk
pemecahan suatu masalah, yaitu :
1. START : berisi intruksi untuk persiapan peralatan yang diperlukan sebelum
menangani pemecahan masalah.
2. READ : berisi intruksi untuk membaca data dari suatu peralatan input.
3. PROCESS : yang berkaitan dengan pemecahan persoalan sesuai dengan data
yang dibaca.
4. WRITE : berisi intruksi untuk merekam hasil kegiatan ke peralatan.
5. END : mengakhiri kegiatan pengolahan.
Flowchart

6. BAB III
PEMBUATAN APLIKASI WEBSITE BERSERTA DATABASE
3.1. Membuat Page Menu 1 (Home)
1. Desain layout Page Menu 1 (Home)
Siapkan beberapa gambar untuk banner dan form menu seperti layout diatas sesuai kehendak
kita masing masing.
2. Buatlah notepad baru, lalu ubah namanya menjadi home.html. Ketikkan script lalu
ikutin seperti berikut.
<html>
<head>
<title>My Aplikasi</title>
</head>
<body>
<body background="images/Rainbow in the Mist, Iguassu Falls.jpg">
<table cellpadding="0" cellspacing="0" bordercolor="#ffffff"
width="100%" height="115">
<tr>
<td width="100%" height="115" bordercolor="#C0C0C0"
body background="">&nbsp;</tdcenter><center><font
face="Aquarium"color="black"><h1>KEAJAIBAN ALAM</h1></center>
<center>
Banner 100% x 115 pixel
Home
200 x 50
pixel
Profile
200 x 50
pixel
Galery
200 x 50
pixel

7. <h2>
<a href="home.html"><img src="images/home.jpg" width="200"
height="50"></a>
<a href="profile.html"><img src="images/profile.jpg" width="200"
height="50"></a>
<a href="galery.html"><img src="images/galery.jpg" width="200"
height="50"></a>
</h2>
</tr>
</table>
<marquee><font face="algerian" size="2" color="blue and red">Kita harus bisa
menjaga dan melestarikan alam ini!!!</font face></marquee>
<font size="1">&nbsp;</font>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111"
width="100%" height="431">
<tr>
<td width="23%" height="307" valign="top">
<table border="1" cellpadding="0" cellspacing="0"
bordercolor="#BDCED9" width="94%" height="245">
<br>
<br>
<br>
</table>
<font size="1">&nbsp;</font>
<table cellpadding="0" cellspacing="0"
bordercolor="#BDCED9" width="94%" height="152">
<tr>
<td width="100%" height="19"
>&nbsp;</tdcenter><center><hr width="250" color="blue"><font face="Andalus"
color="red">KEAJAIBAN ALAM</center><hr width="250" color="blue">
</tr>
<tr>
<td width="100%" height="132" >
&nbsp;</tdcenter><font face="Andalus"
color="Black">
<center><a href="Pantai1.html">Pantai</a></center>
<p>
<center><a href="Air Terjun2.html">Air Terjun Menakjubkan</a></center>
<p>
<center><a href="Hutan3.html">Hutan</a></center>
<p>
<center><a href="Awan4.html"> Awan</a></center></h3>
</tr>

8. </tr>
</table>
</td>
<center><td width="77%" height="307" valign="top">
<table cellpadding="0" cellspacing="0" bordercolor="#ffffff"
width="97%" height="411"></center>
<tr>
<td width="64%"
height="109">&nbsp;</tdcenter><center><font face="cambria" size="4"
color="black" style="bold">Pengertian Keanekaragaman</font face></center>
<center><hr color="blue">
<br>
<center><font face="cambria" size="3"
color="white">Keanekaragaman hayati (biodiversitas) adalah keanekaragaman
organisme yang menunjukkan keseluruhan variasi gen, jenis, dan ekosistem pada
suatu daerah.
Keanekaragaman hayati melingkupi berbagai
perbedaan atau variasi bentuk, penampilan, jumlah, dan sifat-sifat yang terlihat
pada berbagai tingkatan, baik tingkatan gen,
tingkatan spesies, maupun tingkatan ekosistem.
Gampangnya, keanekaragaman hayati adalah semua jenis perbedaan antar mahkluk
hidup.
</font faace></center>
<td width="36%" height="109">&nbsp;</td>
</tr>
<tr>
<td width="64%" height="301"
rowspan="2">&nbsp;</td>
<td width="36%" height="24"
bordercolor="#C0C0C0">
<font size="1">&nbsp; <embed
src="http://www.blogclock.cn/swf/S100015a648f15b-6.swf" Width="160px"
Height="180px" type="application/x-shockwave-flash" quality="high"
wmode="transparent"></embed>
<embed src="http://www.blogclock.cn/swf/S10013291bb8c86-1.swf"
Width="165px" Height="210px" type="application/x-shockwave-flash"
quality="high" wmode="transparent"></embed>
</font></tdcenter><center><font face="Andalus"
color="red">CATEGORIES</center><hr width="250" color="blue">
<center><a href="Pantai.html">Pantai</a></center>
<p>
<center><a href="Air Terjun.html">Air Terjun</a></center>

9. <p>
<center><a href="Hutan.html">Hutan</a></center>
<p>
<center><a href="Awan.html"> Awan </a></center></h3>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Lalu save dengan menekan CTRL + S
3. Untuk melihat hasil script yang diatasm klik kanan pada file kita tsb lalu pilih open
with Mozilla firefox atau browser yang kamu miliki. Hasil tersebut akan seperti ini :

10. 3.2 Membuat Page Menu 2 (Profile)
1. Desain layout Page Menu 2 ( Profile )
Siapkan beberapa gambar untuk banner dan form menu seperti layout diatas sesuai kehendak
kita masing masing.
2. Buatlah notepad baru, lalu ubah namanya menjadi profile.html. Ketikkan script lalu ikutin seperti
berikut.
<html>
<head>
<title>My Aplikasi</title>
</head>
<body>
<body background="images/Rainbow in the Mist, Iguassu Falls.jpg">
<table cellpadding="0" cellspacing="0" bordercolor="#ffffff"
width="100%" height="115">
<tr>
<td width="100%" height="115" bordercolor="#C0C0C0"
body background="">&nbsp;</tdcenter><center><font
face="Aquarium"color="black"><h1>KEAJAIBAN ALAM</h1></center>
<center>
<h2>
<a href="home.html"><img src="images/home.jpg" width="200" height="50"></a>
<a href="profile.html"><img src="images/profile.jpg" width="200" height="50"></a>
<a href="galery.html"><img src="images/galery.jpg" width="200" height="50"></a>
Banner 100% x 115 pixel
Home
200 x 50
pixel
Profile
200 x 50
pixel
Galery
200 x 50
pixel

11. </h2>
</tr>
</table>
<marquee><font face="algerian" size="2" color="blue and red">Kita harus bisa menjaga dan
melestarikan alam ini!!!</font face></marquee>
<font size="1">&nbsp;</font>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111"
width="100%" height="431">
<tr>
<td width="23%" height="307" valign="top">
<table border="1" cellpadding="0" cellspacing="0"
bordercolor="#BDCED9" width="94%" height="245">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</table>
<font size="1">&nbsp;</font>
<table cellpadding="0" cellspacing="0"
bordercolor="#BDCED9" width="94%" height="152">
<tr>
<td width="100%" height="19"
>&nbsp;<embed
src="http://www.blogclock.cn/swf/S100028c14b8825-2.swf" Width="150px" Height="242px"
type="application/x-shockwave-flash" quality="high"
wmode="transparent"></embed></tdcenter><center><hr width="250" color="blue"><font
face="Andalus" color="red">KEAJAIBAN ALAM</center><hr width="250" color="blue">
</tr>
<tr>
<td width="100%" height="132" >
&nbsp;</tdcenter><font face="Andalus" color="Black">
<center><a href="Pantai1.html">Pantai</a></center>
<p>
<center><a href="Air Terjun2.html">Air Terjun Menakjubkan</a></center>
<p>
<center><a href="Hutan3.html">Hutan</a></center>
<p>
<center><a href="Awan4.html"> Awan</a></center></h3>
</tr>
</tr>
</table>

12. </td>
<td width="77%" height="307" valign="top">
<table cellpadding="0" cellspacing="0" bordercolor="#ffffff"
width="97%" height="411">
<tr>
<td width="64%"
height="109">&nbsp;</tdcenter><center><font face="cheri liney" size="6" color="blue"
style="bold"> KEANEKARAGAMAN HAYATI</font face></center>
<hr color="blue">
<p>
<h5>
<font face="Andalus" color="black">
Berdasarkan hal tersebut, para pakar membedakan keanekaragaman hayati menjadi tiga
tingkatan, yaitu keanekaragaman gen, keanekaragaman jenis, dan keanekaragaman ekosistem.
<br>
<font face="billo" size="4" color="green">
1. Keanekaragaman gen</font face>
<br>
Gen atau plasma nuftah adalah substansi kimia yang menentukan sifat keturunan yang terdapat
di dalam kromosom.
Setiap individu mempunyai kromosom yang membawa sifat menurun (gen) dan terdapat di
dalam inti sel.
Perbedaan jumlah dan susunan faktor menurun tersebut akan menyebabkan terjadinya
keanekaragaman gen.
Makhluk hidup satu spesies (satu jenis) bisa memiliki bentuk, sifat, atau ukuran yang berbeda.
Bahkan pada anak kembar sekalipun terdapat perbedaan. Semua perbedaan yang terdapat
dalam satu spesies ini disebabkan karena perbedaan gen.
<br>
<font face="billo" size="4" color="green">
2. Keanekaragaman jenis</font face>
<br>
Spesies atau jenis memiliki pengertian, individu yang mempunyai persamaan secara morfologis,
anatomis, fisiologis
dan mampu saling kawin dengan sesamanya (interhibridisasi) yang menghasilkan keturunan
yang fertil (subur) untuk melanjutkan generasinya.
Kumpulan makhluk hidup satu spesies atau satu jenis inilah yang disebut dengan populasi.
Keanekaragaman jenis adalah segala perbedaan yang ditemui pada makhluk hidup antar jenis
atau antar spesies.
Perbedaan antar spesies organisme dalam satu keluarga lebih mencolok sehingga lebih mudah
diamati daripada perbedaan antar individu dalam satu spesies (keanekaragaman gen).
Contohnya, dalam keluarga kacang-kacangan dikenal kacang tanah, kacang buncis, kacang hijau,
kacang kapri, dan lain-lain.
Di antara jenis kacang-kacangan tersebut kita dapat dengan mudah membedakannya karena di
antara mereka ditemukan ciri khas yang sama.

13. Akan tetapi, ukuran tubuh atau batang, kebiasaan hidup, bentuk buah dan biji, serta rasanya
berbeda.
Contoh lainnya terlihat keanekaragaman jenis pada pohon kelapa, pohon pinang, dan juga pada
pohon palem.
<br>
<font face="billo" size="4" color="green">
3. Keanekaragaman ekosistem</font face>
<br>
Ekosistem dapat diartikan sebagai hubungan atau interaksi timbal balik antara makhluk hidup
yang satu dengan makhluk hidup lainnya dan juga antara makhluk hidup dengan lingkungannya.
Suatu lingkungan tidak hanya dihuni oleh satu jenis makhluk hidup saja, tetapi juga akan dihuni
oleh jenis makhluk hidup lain yang sesuai.
Akibatnya, pada lingkungan tersebut akan dihuni berbagai makhluk hidup berlainan jenis yang
hidup berdampingan.
Perbedaan komponen abiotik (tidak hidup) pada suatu daerah menyebabkan jenis makhluk
hidup (biotik) yang dapat beradaptasi dengan lingkungan tersebut berbeda-beda.
Komponen biotik dan abiotik di berbagai daerah tersebut juga bervariasi baik mengenai kualitas
maupun kuantitasnya.
Variasi kondisi komponen abiotik yang tinggi ini akan menghasilkan keanekaragaman ekosistem.
Contoh ekosistem adalah: hutan hujan tropis, hutan gugur, padang rumput, padang lumut, gurun
pasir, sawah, ladang, air tawar, air payau, laut, dan lain-lain.
Jadi keanekaragaman ekosistem adalah segala perbedaan yang terdapat antar ekosistem.
Keanekaragaman ekosistem ini terjadi karena adanya keanekaragaman gen dan keanekaragaman
jenis (spesies).
</font face></center>
<td width="36%" height="109">&nbsp;
</td>
</tr>
<tr>
</td>
</tr>
</table>
</body>
</html>
Lalu save dengan menekan CTRL + S
3. Untuk melihat hasilnya, klik kanan pada file tersebut lalu pilih open with Mozilla firefox atau
browser yang kamu miliki. Dan hasil script tersebut akan menampilkan seperti ini.

14. 3.3 Membuat Page Menu 3 (Galery)
1. Desain layout Page Menu 3 (Galery)
Siapkan beberapa gambar untuk banner dan form menu seperti layout diatas sesuai kehendak
kita masing masing.
2. Buatlah notepad baru, lalu ubah namanya menjadi galery.html. Ketikkan script lalu ikutin seperti
berikut.
<html>
<head>
<title>.:: Aplikasi Web Arum Herlianti Fadhila::.</title>
</head>
<body background="images/Taman Nasional Teluk cendrawasih.jpg">
<p>
<center><font face="Aquarium" size="2"color="black"><h1>KEAJAIBAN ALAM</h1></font
face></center>
<p>
<center>
<h2>
<a href="home.html"><img src="images/home.jpg" width="200" height="50"></a>
<a href="profile.html"><img src="images/profile.jpg" width="200" height="50"></a>
<a href="galery.html"><img src="images/galery.jpg" width="200" height="50"></a>
</h2>
</center>
<marquee><font face="algerian" size="2" color="blue and red">Kita harus bisa menjaga dan
melestarikan alam ini!!!</font face></marquee>
<p>
<h3>
<pre><font face="Hobo std" color="black">
<embed src="http://www.blogclock.cn/swf/S100015a648f15b-6.swf" Width="160px"
Height="180px" type="application/x-shockwave-flash" quality="high"
wmode="transparent"></embed><embed
src="http://www.blogclock.cn/swf/S10013291bb8c86-1.swf" Width="165px" Height="210px"
type="application/x-shockwave-flash" quality="high"
wmode="transparent"></embed><center><img src="images/Iguazu National Park,
Banner 100% x 115 pixel
Home
200 x 50
pixel
Profile
200 x 50
pixel
Galery
200 x 50
pixel

15. Argentina.jpg"width="200"height="200"border="1"><img src="images/20120801-cantiknya-
fenomena-cahaya-warna-warni-alami-di-air-terjun-niagara-
03.jpg"width="200"height="200"border="1">
<br>
<img src="images/Menjangan-Island-2.jpg"width="200"height="200"border="1"><img
src="images/detik_papua1-pantaitimurbiak-EC-05.jpg"width="200"height="200"border="1">
<br>
<img src="images/Taman Nasional Bali Barat - Gallery
(3).jpg"width="200"height="200"border="1"><img
src="images/11165_239759201521_237127251521_4314821_4453231_n.jpg"width="200"heig
ht="200"border="1">
<br>
<img src="images/Keanekaragaman Hayati.jpg"width="200"height="200"border="1"></center>
</pre></font face>
</h3>
</body>
</html>
Lalu save dengan menekan CTRL + S
3. Untuk melihat hasilnya, klik kanan pada file tersebut lalu pilih open with Mozilla firefox atau
browser yang kamu miliki. Dan hasil script tersebut akan menampilkan seperti ini.

16. 1. Categories air terjun
2. Categories awan

17. 3. Categories hutan
4. Categories pantai