Dokumen tersebut memberikan tutorial dasar pembuatan website menggunakan bahasa pemrograman HTML dan database MySQL. Terdiri dari penjelasan tentang instalasi perangkat lunak XAMPP, struktur dasar dokumen HTML, dan cara membuat database serta autentikasi login menggunakan PHP dan MySQL.

1. SMK Negri 1 depok
Tutorial WEB
Nama: Muhammad esa panghegar
Kelas : X RPL I

2. 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

3. __________________________________________________________________________________
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
Bab III Pembuatan web
Pengertian 10
Dasar pembuatan web 10
pembuatan HTMl 15

4. ______________________________________________________________________________
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.

5. 3. Pilih bahasa yang anda gunakan kemudian klik OK
4. Kemudianakan muncul jendela selamat datang lalu klik next

6. 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

7. 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.
______________________________________________________________________________

8. Bab II Rancangan web
Interface
Flowchart

10. Bab III Pembuatan web
Pengertian
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.

11. 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:
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

12. 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>
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>

13. <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>
<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">&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>

14. <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
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

16. 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.

17. 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 :

18. 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 :

19. 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 :

20. 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="">&nbsp;</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>

21. <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{

22. 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"