Cover
Upcoming SlideShare
Loading in...5
×
 

Cover

on

  • 186 views

 

Statistics

Views

Total Views
186
Views on SlideShare
139
Embed Views
47

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 47

http://arumherliantifadhilarpl.blogspot.com 43
http://arumherliantifadhilarpl.blogspot.ru 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Cover Cover Document Transcript

    • TUTORIAL WEB“KEAJAIBAN ALAM”DISUSUN OLEH :NAMA : ARUM HERLIANTI FADHILAKELAS : X RPL 1NISN : 997SMK NEGERI 1 DEPOKJl. Raya Tapos Gg. Bhakti Suci No.100Kel Cimpaeun Kec Tapos-Depok, Jawa Barathttp :www.smkn1depok.sch.id email : info@smkn1depok.sch.id
    • Kata pengantarAssalamualaikum wr wbPuji dan syukur saya panjatkan kehadirat Allah swt, yang telahmelimpahkan rahmat dengan karunia nya untuk dapat menyelesaikanpembuatan tutorial Aplikasi Web .Saya mengucapkan terima kasih kepada guru bidang study yangtelah memberi kesempatan untuk membuat makalah ini.Laporan ini dirangkai sedemikian rupa untuk mengajak kita semuauntuk mengenal, mempelajari, dan memahami pembuatan web. Tujuannya untuk memudahkan orang-orang membuat web sendiri denganmudah dan dengan langkah-langkah yang dibuat.Tidak lebihnya mohon maaf jika rangkaian tugas pembuatanTutorial ini ada kekurangan dan kurang sempurna karena itu semua diluar saya selaku pembuat makalah ini. Semoga dengan terbuatnyamakalah ini dapat menjadikan kita lebih tahu dan paham tentangpembuatan web Sekian dan terimakasihWassalamualaikum wr wb
    • DAFTAR ISIHalamanLEMBAR PENGESAHAN ...........................................................................................iiKATA PENGANTAR ...................................................................................................vBAB I. INSTALASI SOFTWARE PENGEMBANG...........................................................11.1. XAMPP ......................................................................................................................... 1BAB II. RANCANGAN APLIKASI .......................................................................................... 132.1. Flowchart ................................................................................................................... 18BAB III. PEMBUATAN APLIKASI WEBSITE BERSERTA DATABASE..............................253.1.Membuat Page Menu 1 (Home)3.2. Membuat Page Menu 2 (Profile)3.3. Membuat Page Menu 3 (Galery)
    • BAB IInstalasi Software Pengembang1. XAMPPXampp kepanjangan dari yaitu Apache, PHP, MySQL, dan phpMyAdmin. XAMPPmerupakan tool yang menyediakan paket perangkat lunak ke dalam satu buah paket.Dengan menginstal maka kita tidak perlu lagi melakukan instalasi dan konfigurasi webserver Apache, PHP, dan MySQL secara manual. XAMPP akan menginstalasi danmengkofigurasikan secara otomatis.Cara menginstall XAMPP1. Sebelum dimulai untuk XAMPP nya, Download xampp terlebih dahulu di websitehttp://www.apachefriends.org/en/xampp-windows.html pilih basic package untuk instalasitersebut.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 XAMPPdesktop, XAMPP start menu, dan XAMPP section. Abaikan saja pilihan tersebut, lalu klikINSTALL.6. Setelah instalasi selesai, jalankan XAMPP.7. Lalu klik Start Apache dan Start MySQL.
    • 8. Web yang kita buat, akan beralamat di http://localhost, akses dengan browser sesuai seleraanda.BAB IIRancangan Aplikasi2.1 FlowchartFlowchart merupakan gambar yang memperlihatkan urutan dan hubungan prosesbeserta intruksinya. Gambaran ini dinyatakan symbol dengan demikian setiap symbolmenggambarkan proses tertentu. Sedangkan hubungan antara proses digambarkan dengangaris penghubung.Flowchart merupakan langkah awal membuat program. Dengan adanya flowchart urutanproses kegiatan lebih jelas. Jika ada penambahan proses maka dapat dilakukan lebih mudah.Setelah flowchart selesai disusun, selanjutnya pemograman menerjemahkannya denganbahasa pemograman.Symbol-simbol FlowchartFlowchart disusun dengan symbol-simbol ini dipakai sebagai alat bantu menggambarkanproses di dalam program.Dalam pembuatan Flowchart tidak ada rumus atau patokan yang bersifat mutlak karenaflowchart merupakan gambaran hasil pemikiran dalam menganalisa suatu masalah dengancomputer sehingga flowchart yang dihasilkan dapat beragam antara satu pemogramandengan pemograman lainnya.Namun secara garis besar, setiap pengolahan selalu terdiri dari tiga bagian utama yaitu :1. Input ialah bahan mentah.2. Proses pengolahan3. Output ialah bahan jadi.Untuk mengolah data dengan computer, dapat dirangkum urutan dasar untukpemecahan suatu masalah, yaitu :1. START : berisi intruksi untuk persiapan peralatan yang diperlukan sebelummenangani pemecahan masalah.2. READ : berisi intruksi untuk membaca data dari suatu peralatan input.3. PROCESS : yang berkaitan dengan pemecahan persoalan sesuai dengan datayang dibaca.4. WRITE : berisi intruksi untuk merekam hasil kegiatan ke peralatan.5. END : mengakhiri kegiatan pengolahan.Flowchart
    • BAB IIIPEMBUATAN APLIKASI WEBSITE BERSERTA DATABASE3.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 kehendakkita masing masing.2. Buatlah notepad baru, lalu ubah namanya menjadi home.html. Ketikkan script laluikutin 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><fontface="Aquarium"color="black"><h1>KEAJAIBAN ALAM</h1></center><center>Banner 100% x 115 pixelHome200 x 50pixelProfile200 x 50pixelGalery200 x 50pixel
    • <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 bisamenjaga 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>
    • </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 keanekaragamanorganisme yang menunjukkan keseluruhan variasi gen, jenis, dan ekosistem padasuatu daerah.Keanekaragaman hayati melingkupi berbagaiperbedaan atau variasi bentuk, penampilan, jumlah, dan sifat-sifat yang terlihatpada berbagai tingkatan, baik tingkatan gen,tingkatan spesies, maupun tingkatan ekosistem.Gampangnya, keanekaragaman hayati adalah semua jenis perbedaan antar mahklukhidup.</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; <embedsrc="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>
    • <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 + S3. Untuk melihat hasil script yang diatasm klik kanan pada file kita tsb lalu pilih openwith Mozilla firefox atau browser yang kamu miliki. Hasil tersebut akan seperti ini :
    • 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 kehendakkita masing masing.2. Buatlah notepad baru, lalu ubah namanya menjadi profile.html. Ketikkan script lalu ikutin sepertiberikut.<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><fontface="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 pixelHome200 x 50pixelProfile200 x 50pixelGalery200 x 50pixel
    • </h2></tr></table><marquee><font face="algerian" size="2" color="blue and red">Kita harus bisa menjaga danmelestarikan 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;<embedsrc="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"><fontface="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>
    • </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 tigatingkatan, 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 terdapatdi dalam kromosom.Setiap individu mempunyai kromosom yang membawa sifat menurun (gen) dan terdapat didalam inti sel.Perbedaan jumlah dan susunan faktor menurun tersebut akan menyebabkan terjadinyakeanekaragaman 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 terdapatdalam 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, fisiologisdan mampu saling kawin dengan sesamanya (interhibridisasi) yang menghasilkan keturunanyang 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 jenisatau antar spesies.Perbedaan antar spesies organisme dalam satu keluarga lebih mencolok sehingga lebih mudahdiamati 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 diantara mereka ditemukan ciri khas yang sama.
    • Akan tetapi, ukuran tubuh atau batang, kebiasaan hidup, bentuk buah dan biji, serta rasanyaberbeda.Contoh lainnya terlihat keanekaragaman jenis pada pohon kelapa, pohon pinang, dan juga padapohon 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 hidupyang 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 dihunioleh jenis makhluk hidup lain yang sesuai.Akibatnya, pada lingkungan tersebut akan dihuni berbagai makhluk hidup berlainan jenis yanghidup berdampingan.Perbedaan komponen abiotik (tidak hidup) pada suatu daerah menyebabkan jenis makhlukhidup (biotik) yang dapat beradaptasi dengan lingkungan tersebut berbeda-beda.Komponen biotik dan abiotik di berbagai daerah tersebut juga bervariasi baik mengenai kualitasmaupun kuantitasnya.Variasi kondisi komponen abiotik yang tinggi ini akan menghasilkan keanekaragaman ekosistem.Contoh ekosistem adalah: hutan hujan tropis, hutan gugur, padang rumput, padang lumut, gurunpasir, 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 keanekaragamanjenis (spesies).</font face></center><td width="36%" height="109">&nbsp;</td></tr><tr></td></tr></table></body></html>Lalu save dengan menekan CTRL + S3. Untuk melihat hasilnya, klik kanan pada file tersebut lalu pilih open with Mozilla firefox ataubrowser yang kamu miliki. Dan hasil script tersebut akan menampilkan seperti ini.
    • 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 kehendakkita masing masing.2. Buatlah notepad baru, lalu ubah namanya menjadi galery.html. Ketikkan script lalu ikutin sepertiberikut.<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></fontface></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 danmelestarikan 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><embedsrc="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 pixelHome200 x 50pixelProfile200 x 50pixelGalery200 x 50pixel
    • 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"><imgsrc="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"><imgsrc="images/11165_239759201521_237127251521_4314821_4453231_n.jpg"width="200"height="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 + S3. Untuk melihat hasilnya, klik kanan pada file tersebut lalu pilih open with Mozilla firefox ataubrowser yang kamu miliki. Dan hasil script tersebut akan menampilkan seperti ini.
    • 1. Categories air terjun2. Categories awan
    • 3. Categories hutan4. Categories pantai