![<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 lagi
cek logiin
dengan script
<?php
include "koneksi.php";
$username = $_POST['username'];
$password = $_POST['password'];
$sql = "select * from login where username='$username' and
password='$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{](https://image.slidesharecdn.com/tutorial-130524044407-phpapp01/85/Tutorial-web-programing-x-rpl-1-19-320.jpg)
Tutorial web programing x rpl 1
- 1. kata pengantar Puji syukur kami panjatkan atas kehadirat Allah SWT yang telah melimpahkan rahmat dan hidayatnya , sehingga nakalah ini dapat tersusun walaupun masih dalam bentuk yg sangat sederhana Makalah ini disusun untuk memenuhi tugas mata pelajaran Produktif RPL yang berjudul "TUTORIAL WEBSITE". Dengan makalah ini diharapkan siswa dapar lebih kreatif dalam mengembangkan wawasan dan pengetahuan. Penulis juga mengucapkan banyak terimakasih kepada semua pihak yg telah membantu, sehingga makalah ini dapat terselesaikan. Penulis menyadari makalah ini masih sangat sederhana baik bentuk maupun isinya, sehingga penulis mengharapkan masukan dan saran demi kesempurnaan makalah ini akhir kata penulis berharap makalah ini bermanfaat bagi penulis pembaca pada umumnya. Depok , 22 mei 2013 Muhammad Esa Panghegar __________________________________________________________________________________ DAFTAR ISI Kata pengantar II Daftar isi III Bab I instalasi software pengembang 4 Xampp 4 Bab II Rancangan web 8 Interface 8 Flowchart 9
- 2. Bab III Pembuatan web Pengertian 10 Dasar pembuatan web 10 pembuatan HTMl 15 ______________________________________________________________________________ Bab I instalasi software pengembang dan 1.Xampp Langsung 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 pendownloadnya paling banyak) disini saya mendownload versi 1.8.0 2. Setelah Proses download selesai kemudian klik 2 kali installer tersebut.
- 3. 3. Pilih bahasa yang anda gunakan kemudian klik OK 4. Kemudianakan muncul jendela selamat datang lalu klik next
- 4. 5. Pilih lokasi berkas penyimpanan letak XAMPP kemudian klik next 6. Centag pada semua pilihan seperti dalam gambar kemudian klik install 7. Proses instalasi sedang berjalan
- 5. 8. Proses instalasi telah selesai kemudian klik finish 9. XAMPP sudah berjalan 10. Sekarang kita coba untuk mengecek apakah benar benar sudah berjalan atau belum, caranya buka beowser anda kemudian buka alamat http://localhost. Jika anda menemukan tampilan seperti ini di bawah berarti XAMPP sudah terinstall dengan baik di komputer anda.
- 6. ______________________________________________________________________________ Bab II Rancangan web Interface Flowchart
- 7. _____________________________________________________________________________________ _ Bab III Pembuatan web Pengertian
- 8. 1. PERISTILAHAN/GLOSSARY Animation : Animasi dari beberapa gambar diam dibuat seperti hidup tanpa ada patah-patah dalam pergerakannya. header : Merupakan kepala atau bagian atas dari sebuah web site. Download : Proses pengambilan file atau mengcopy file. Effect : Tindakan yang dikerjakan untuk menghaluskan atau memperindah 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 hipertext Insert : Memasukkan jenis file kedalam bidang kerja SWiSHmax. Installation manual : Petunjuk Instalasi Keyframe : Pada dasarnya hampir sama dengan frame. Hanya saja untuk Key frame lebih menunjukkan untuk satu frame. License Agreement : Persetujuan lisensi penggunaan suatu software tertentu Movie : File yang dibuat dalam SWiSHmax. Object : Benda yang sedang dikerjakan dalam bidang kerja SWiSHmax. 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 melayani komputer-komputer klien. Software : Perangkat lunak, program yang berjalan di komputer. Source Code : Kode asli suatu program Time Line : Garis waktu atau pewaktuan yang terdapat dalam SwiSHmax. Web design : Pembuatan/desain halaman-halaman web. Dasar Pembuatan web Memahami dasar-dasar pemrograman berbasis web Tujuan Kegiatan Pemelajaran Mengerti fitur-fitur software bahasa pemrograman dan fungsinya untuk mengelola halaman web. Mampu membuat struktur dokumen dengan tag HTML. Peserta diklat dapat mengenali dan memahami fungsi obyek-obyek web dan tag-tag HTML dalam pembuatan halaman-halaman web yang meliputi:
- 9. Memformat dokumen dan menambahkan objek Membuat tabel dan frame Membuat dan membangkitkan Link Peserta diklat dapat mengenali dan memahami fitur-fitur pengelolaan file halaman web. Peserta diklat dapat melakukan kombinasi tag-tag HTML dengan obyek- obyek lain untuk membangun halaman web yang disimpan dalam format HTML. Pembuatan HTML(Hypertext Markup Language) HTML atau Hypertext Marksup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa yang mengandung tanda (tag) tertentu yang digunakan untuk mengatur format tampilan suatu dokumen. HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke browser (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web. Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor biasa. Namun sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak akan memperoleh hasil yang maksimal. Mengapa? Karena walaupun software-software tersebut semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web yang sangat komplek. Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain web. Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapi yang paling mudah adalah menggunakan Notepad. Setelah anda memahami betul semua tag-tag dasar html, diakhir nanti kita akan belajar membuat halaman web dengan menggunakan web tool. Struktur Dasar Html Dalam penggunaannya, sebagian besar kode HTML harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/"). Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai berikut: <html> <head> <title>Judul Form/Caption</title> </head> <body>
- 10. ISI WEB </body> </html> klik save lalu berikan nama Index.HTML contoh jika sudah maka kembangkanlah seperti ini, ini adalah contoh scrip web 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> <marquee><font face="Arial" size="7" color="Red" style="strong"><img src="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>
- 11. <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 , disini anda akan mendapatkan pemesanan dengan harga murah dan sangat berkualitas, usaha online ini berbasis internasional , yg berawal dari keisengan semata , website ini saya buat untuk usaha yg sedang kami rintis ini, alfrida adalah nama belakang dari kekasih, dan usaha ini dirintis oleh kami berdua,dan kami disiini menawarkan banyak produk untuk anda sekalian , untuk lebih lanjut silahkan menghubungi saya lewat email : eghha.esha@gmail.com silahkan chek galery untuk melihat" baju dan klik pemesanan untuk memesan pakaian yg anda pilih thx </p></td> </tr> <tr> <td height="68"> </td> <td> </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> <tr> <td height="68"><span class="entry"><font size="5" color ="white">Alfrida.com menyediakan banyak baju baju terbaru yg kami produksi maupun dari luar , untuk melihat produk kami silahkan mengechek ke halaman Galery dan memilih mana yg kalian suka dan
- 12. pesanlah melalui halaman pemesanan dan jangan lupa mencantumkan alamat lengkap 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. jangan lupa juga untuk menyatukan gamabr' di satu folder , dan memilah mana gambar" yg akan anda masukan contoh selanjutnya pembuatan data base 1. Pertama tama aktifkan dulu xampp nya agar bisa berjalan proses database nya.
- 15. 2. Lalu kalo sudah dirunning kan MySql nya buka google chrome lalu tulis di website nya localhost setelah muncul akan menampilkan seperti ini : 3. Setelah tampilan localhost muncul lalu klik phpMyadmin seperti digambar dibawah ini :
- 16. 4. Setelah phpMyadmin nya sudah di klik maka akan muncul tampilan seperti 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 klik nama database yang anda bikin tadi seperti gambar dibawah ini :
- 17. 7. Setelah sudah diklik bukutamu1 nya akan muncul seperti ini dan klik sql lagi : 8. Lalu script nya diisi di sql untuk membuat sebuah alamat dan ketik lalu di go seperti dibawah ini 9. Lalu kalau sudah muncul klik alamat kemudian klik sql untuk membuat isi alamat kemudian klik go tersebut :
- 18. 10. Setelah di go akan muncul tanda success bahwa database tersebut jadi . setelah itu klik export yang berada di kanan atas lalu muncul dan jika sudah muncul langsung klik go seperti ini lalu 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=""> </tdcenter><center><font face="50's Headline DSG"color="white"><h1>Selamat datang di alfrida.com</h1></center> </tdcenter><center><font face="50's Headline DSG"color="white"><h1>Silahkan login </h1></center> <center> <p>
- 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 lagi cek logiin dengan script <?php include "koneksi.php"; $username = $_POST['username']; $password = $_POST['password']; $sql = "select * from login where username='$username' and password='$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. 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.php' dan 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"