Tutorial web programing

525 views

Published on

Tugas

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Tutorial web programing

  1. 1. SMK Negri 1 depokTutorial WEBNama: Muhammad esa panghegarKelas : X RPL I
  2. 2. kata pengantarPuji syukur kami panjatkan atas kehadirat Allah SWT yang telah melimpahkan rahmat danhidayatnya , sehingga nakalah ini dapat tersusun walaupun masih dalam bentuk yg sangat sederhanaMakalah ini disusun untuk memenuhi tugas mata pelajaran Produktif RPL yang berjudul "TUTORIALWEBSITE". Dengan makalah ini diharapkan siswa dapar lebih kreatif dalam mengembangkan wawasandan pengetahuan. Penulis juga mengucapkan banyak terimakasih kepada semua pihak yg telahmembantu, sehingga makalah ini dapat terselesaikan.Penulis menyadari makalah ini masih sangat sederhana baik bentuk maupun isinya, sehingga penulismengharapkan masukan dan saran demi kesempurnaan makalah iniakhir kata penulis berharap makalah ini bermanfaat bagi penulis pembaca pada umumnya.Depok , 22 mei 2013Muhammad Esa Panghegar
  3. 3. __________________________________________________________________________________DAFTAR ISIKata pengantar IIDaftar isi IIIBab I instalasi software pengembang 4Xampp 4Bab II Rancangan web 8Interface 8Flowchart 9Bab III Pembuatan webPengertian 10Dasar pembuatan web 10pembuatan HTMl 15
  4. 4. ______________________________________________________________________________Bab I instalasi software pengembang dan1.XamppLangsung saja kita akan membahas tutorial untuk menginstall XAMPP.1. Download XAMPP disini (Pilih versi yang terbaru kemudian pilih yang versi terbaru)Kemudian pilih yang installer dengan format exe (kalau bingung pilih saja yang pendownloadnyapaling banyak) disini saya mendownload versi 1.8.02. Setelah Proses download selesai kemudian klik 2 kali installer tersebut.
  5. 5. 3. Pilih bahasa yang anda gunakan kemudian klik OK4. Kemudianakan muncul jendela selamat datang lalu klik next
  6. 6. 5. Pilih lokasi berkas penyimpanan letak XAMPP kemudian klik next6. Centag pada semua pilihan seperti dalam gambar kemudian klik install7. Proses instalasi sedang berjalan
  7. 7. 8. Proses instalasi telah selesai kemudian klik finish9. XAMPP sudah berjalan10. Sekarang kita coba untuk mengecek apakah benar benar sudah berjalan atau belum, caranya bukabeowser anda kemudian buka alamat http://localhost. Jika anda menemukan tampilan seperti ini dibawah berarti XAMPP sudah terinstall dengan baik di komputer anda.______________________________________________________________________________
  8. 8. Bab II Rancangan webInterfaceFlowchart
  9. 9. Bab III Pembuatan webPengertian1. PERISTILAHAN/GLOSSARYAnimation : Animasi dari beberapa gambar diam dibuat seperti hiduptanpa ada patah-patah dalam pergerakannya.header : Merupakan kepala atau bagian atas dari sebuah website.Download : Proses pengambilan file atau mengcopy file.Effect : Tindakan yang dikerjakan untuk menghaluskan ataumemperindah animasi pada obyek.Event : Tindakan yang dilakukan setelah adanya action.Export : Merubah jenis format ke bentuk yang lain.Format : Bentuk ektensi dari jenis file.Frame : Bagian dari Timeline.Grouping : Mengumpulkan beberapa obyek untuk dijadikan satu.HTML : Hypertext Markup Language, bahasa penanda hipertextInsert : Memasukkan jenis file kedalam bidang kerja SWiSHmax.Installation manual : Petunjuk InstalasiKeyframe : Pada dasarnya hampir sama dengan frame. Hanya sajauntuk Key frame lebih menunjukkan untuk satu frame.License Agreement : Persetujuan lisensi penggunaan suatusoftware tertentuMovie : File yang dibuat dalam SWiSHmax.Object : Benda yang sedang dikerjakan dalam bidang kerjaSWiSHmax.Operand : data yang dioperasikan atau dimanipulasi.Operator : simbol/tanda yang digunakan untuk melakukan operasi-operasi matematis atau operasi string.Player : Untuk memainkan animasi yang telah dibuat.Preview : Melihat hasil yang telah dikerjakan.Scane : Satu movie merupakan satu Scane.Search Engine : Mesin bantu pencarian data.Server : Pelayan, Komputer induk yang bertugas untuk melayanikomputer-komputer klien.Software : Perangkat lunak, program yang berjalan di komputer.Source Code : Kode asli suatu programTime Line : Garis waktu atau pewaktuan yang terdapat dalamSwiSHmax.Web design : Pembuatan/desain halaman-halaman web.
  10. 10. Dasar Pembuatan webMemahami dasar-dasar pemrograman berbasis webTujuan Kegiatan PemelajaranMengerti fitur-fitur software bahasa pemrograman dan fungsinya untukmengelola halaman web.Mampu membuat struktur dokumen dengan tag HTML.Peserta diklat dapat mengenali dan memahami fungsi obyek-obyek web dantag-tag HTML dalam pembuatan halaman-halaman web yang meliputi:Memformat dokumen dan menambahkan objekMembuat tabel dan frameMembuat dan membangkitkan LinkPeserta diklat dapat mengenali dan memahami fitur-fitur pengelolaanfile halaman web.Peserta diklat dapat melakukan kombinasi tag-tag HTML dengan obyek-obyek lain untuk membangun halaman web yang disimpan dalam formatHTML.Pembuatan HTML(Hypertext Markup Language)HTML atau Hypertext Marksup Language merupakan salah satu format yangdigunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalamanweb. Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dandisebut sebagai Markup Language yakni bahasa yang mengandung tanda(tag) tertentu yang digunakan untuk mengatur format tampilan suatudokumen.HTTP atau Hypertext Transfer Protokol merupakan protokol yangdigunakan untuk mentransfer data atau document yang berformat HTMLdari web server ke browser (Internet Explorer, Netscape Navigator,NeoPlanet, dll). Dengan HTTP inilah yang memungkinkan Anda menjelajahinternet dan melihat halaman web.Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi tekseditor biasa. Namun sekarang ini di pasaran terdapat banyak sekaliHTML authoring (software yang digunakan untuk membuat atau mendesainhalaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPagesekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidakakan memperoleh hasil yang maksimal. Mengapa? Karena walaupunsoftware-software tersebut semakin menawarkan kemudahan dalam membuathalaman web, tetapi biasanya seseorang masih perlu untuk mengedithalaman web tersebut secara manual. Terutama untuk halaman web yangsangat komplek.Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasardari desain web. Yang dibutuhkan hanya sebuah word processor. Andabisa menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapiyang paling mudah adalah menggunakan Notepad. Setelah anda memahamibetul semua tag-tag dasar html, diakhir nanti kita akan belajarmembuat halaman web dengan menggunakan web tool.Struktur Dasar Html
  11. 11. Dalam penggunaannya, sebagian besar kode HTML harus terletak di antaratag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan</namatag> (terdapat tanda "/"). Struktur dasar dokumen HTML berisielemen-elemen atau tag sebagai berikut:<html><head><title>Judul Form/Caption</title></head><body>ISI WEB</body></html>klik save lalu berikan nama Index.HTML contohjika sudah maka kembangkanlah seperti ini, ini adalah contoh scripweb saya yg berjudul alfrida.com<html><head><title>Alfrida.com</title></head><body background="bg/bg.JPG"><font face=arial size=6 color=white><center><b><img src="header/header2.png"><br></center><font face=arial size=4 color=blue><font face=arial size=1 color=white><hr><center>| <a href=index.html><img src="menu/home.PNG"></a>| <a href=galery.html><img src="menu/galery.PNG"></a>| <a href=pemesanan.html><img src="menu/pemesanan.PNG"></a> |</center><hr><center>
  12. 12. <marquee><font face="Arial" size="7" color="Red" style="strong"><imgsrc="banner/ea.png"></font></marquee><table border=0 cellpadding=1><td width="550" align="center"><font size="5" color="white"><b>WELCOME IN Alfrida.com<small> </small></td><td width="240" align="center"><font size="5"color="white"></td></tr><tr><td height="68"><p class="entry"><font size="5" color="white"> Ini adalah website pemesanan baju/kaos terbaru , disinianda akan mendapatkan pemesanan dengan harga murah dan sangatberkualitas, usaha online ini berbasis internasional , yg berawal darikeisengan semata , website inisaya buat untuk usaha yg sedang kami rintis ini, alfrida adalah namabelakang dari kekasih,dan usaha ini dirintis oleh kami berdua,dan kami disiini menawarkanbanyak produk untuk anda sekalian , untuk lebih lanjutsilahkan menghubungi saya lewat email : eghha.esha@gmail.com silahkanchek galery untuk melihat" baju dan klik pemesanan untuk memesanpakaian yg anda pilih thx </p></td></tr><tr><td height="68">&nbsp;</td><td>&nbsp;</td></tr><tr><td height="23" align="center"><font size="5" color="white">Posted On April<small> 14th, 2013 By Admin</small></td><td align="center"><font size="5" color ="white"></td></tr>
  13. 13. <tr><td height="68"><span class="entry"><font size="5" color="white">Alfrida.com menyediakan banyak baju baju terbaru yg kamiproduksi maupun dari luar , untuk melihat produk kami silahkanmengechek ke halaman Galery dan memilih mana yg kalian suka danpesanlah melalui halaman pemesanan dan jangan lupa mencantumkan alamatlengkap dan nomor tlp untuk kami menghubungi anda ^^ </td><ul><ul><td valign="top"><font size="5" color ="white"><ul></p></td></tr></table><hr><center><img src="footer/banner0.png" width="1000"height="200"></center></body></html>nanti akan tampil seperti
  14. 14. jangan lupa juga untuk menyatukan gamabr di satu folder , dan memilahmana gambar" yg akan anda masukan contohselanjutnya pembuatan data base1. Pertama tama aktifkan dulu xampp nya agar bisa berjalan prosesdatabase nya.
  15. 15. 2. Lalu kalo sudah dirunning kan MySql nya buka google chrome lalutulis di website nya localhost setelah muncul akan menampilkan sepertiini :3. Setelah tampilan localhost muncul lalu klik phpMyadmin sepertidigambar dibawah ini :
  16. 16. 4. Setelah phpMyadmin nya sudah di klik maka akan muncul tampilanseperti ini dan kemudian klik sql untuk mengisi sebuah database.5. Kemudian membuat database seperti tampilan dibawah ini lalu klik go:6. Setelah klik go kemudian akan muncul seperti ini dan anda lalu kliknama database yang anda bikin tadi seperti gambar dibawah ini :
  17. 17. 7. Setelah sudah diklik bukutamu1 nya akan muncul seperti ini dan kliksql lagi :8. Lalu script nya diisi di sql untuk membuat sebuah alamat dan ketiklalu di go seperti dibawah ini9. Lalu kalau sudah muncul klik alamat kemudian klik sql untuk membuatisi alamat kemudian klik go tersebut :
  18. 18. 10. Setelah di go akan muncul tanda success bahwa database tersebutjadi .setelah itu klik export yang berada di kanan atas lalu muncul dan jikasudah muncul langsung klik go seperti inilalu buat<html><head><title>Alfrida.com</title></head><body><body background="bg/bg.jpg"><center><b><img src="header/header2.png"><br></center><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="50s Headline DSG"color="white"><h1>Selamat datang dialfrida.com</h1></center></tdcenter><center><font face="50s HeadlineDSG"color="white"><h1>Silahkan login </h1></center> <center><p>
  19. 19. <font face="times new roman" color="blue" size="4"style="bold"><form action="ceklogin.php" method="POST">user id: <input type="text" name="username"><br>password : <input type="password"name="password"><br><input type="submit" value="OK"></form></tr></table></body></html>save dengan nama "Login.HTML"lalu buat lagicek logiindengan script<?phpinclude "koneksi.php";$username = $_POST[username];$password = $_POST[password];$sql = "select * from login where username=$username andpassword=$password";$query = mysql_query($sql);$query = mysql_num_rows($query);if(empty($username) || empty($password) ){echo "<script>window.alert(maaf anda gagal untuk login);window.location=(login.html); </script>";}else{
  20. 20. if($query> 0){header(location:index.html);} else {echo "<script>window.alert(maaf anda gagal untuk login);window.location=(login.html); </script>"; }}?>save dengan nama "cheklogin.phpdan satu lagi untuk koneksi database<?php$hostname =localhost ;$username =root ;$password = ;$database =esaa;$connect = mysql_connect($hostname,$username,$password) ;mysql_select_db($database,$connect);?>save dengan nama "koneksi.php"

×