1. TUTORIAL WEB SITE
X RPL 1
“WORLD OF FASHION”
BY : JESSICA MAWARNI
NURAIDA DWI UTARI
SMKN1 DEPOK
Jl. Raya Tapos, Gg bhakti suci no.100
Kel. Cimpauen, kec. Tapos, kota Depok
Telp/fax (021)8790 7233
Web : http//smkn1depok.sch.id e-mail=info@smkn1depok.sch.id

2. KATA PENGANTAR
DAFTAR ISI
DAFTAR TABEL
DAFTAR GAMBAR
BAB I instalasi development softwere
I.1. XAMPP
BAB II. Pembuatan perancangan aplikasi
II.1.story board
II.1.1IDE (Integrated Development Environment)
II.1.2 Virtual Server (Apache/ Tomcat)
II.1.3. Plug Ins
rancangan dan Realisasi Aplikasi
II.2.1. Diagram Flowchart
II.2.2. Struktur Tabel Basis Data
II.2.3. Realisasi Antar Muka (desain interface)
BAB III.Pembuatan aplikasi WEB
III.1.1. Pembuatan project
III.1.2. mengkoneksikan database ke-WEB
BAB VI. Penutup

3. MOTTO
 Dengan ilmu kehidupan menjadi mewah
 Dengan seni kehidupan menjadi halus
 Dengan agama kehidupan menjadi ter arah dan
bermakna
 Dengan olahraga tubuh akan selalu sehat
 Dengan kedisiplinan pekerjaan terasa mudah
 Dengan semangat kerja menjadi cepat

4. KATA PENGANTAR
PUJI SYUKUR KAMI PANJATKAN KEHADIRAT ALLAH SWT YANG TELAH MEMBERIKAN
RAHMAT SERTA KARUNIA-NYA KEPADA KAMI SEHINGGA KAMI BERHASIL MENYELESAIKAN TUGAS INI
YANG ALHAMDULILLAH TEPAT PADA WAKTUNYA YANG BERJUDUL “WEB SITE,WORLD OF FASHION”
TUGAS INI BERISIKAN TENTANG INFORMASI BAGAIMANA CARA MEMBUAT WEB SITE SEDERHANA ,
SAYA MENYADARI BAHWA TUGAS INI MASIH JAUH DARI SEMPURNA, OLEH KARENA ITU KRITIK DAN
SARAN DARI SEMUA PIHAK YANG BERSIFAT MEMBANGUN SELALU KAMI HARAPKAN DEMI
KESEMPURNAAN TUGAS INI.
AKHIR KATA, KAMI SAMPAIKAN TERIMA KASIH .

5. 1.JIKA ANDA INGIN MEMBUAT SEBUAH WEB YANG HARUS ANDA LAKUKAN PERTAMA YAITU MENGINSTALL
TERLEBIH DAHULU APLIKASI-APLIKASI YANG DI BUTUH KAN SEPERTI :

6. 2.APA BILA SEBUAH WEB MENGGUNAKAN DREAM WEAVER MAKA INSTALL TERLEBIH DAHULU,JIKA
TIDAK MAKA MENGGUKAN NOTEPAD.

7. 3.DAN JIKA TIDAK MENGGUNAKAN DREAM WEAVER DALAM PEMBUATAN SEBUAH APLIKASI WEB MAKA
MENGGUNAKAN NOTEPAD :

8. 2. Penggunaan IDE (Integrated Development Environment)
Penggunaan jQuery
Pengertian jQuery | Fitur dan kelebihan jQuery-,
Semenjak dirilis pertama kali pada tahun 2006 oleh john Resig, jQuery telah mencuri
perhatian pada developer web. buktinya, pada tahun-tahun berikutnya jQuery telah banyak
di gunakan oleh website-website terkemuka di dunia seperti Google, microsoft, Intel, Nokia,
Oracle, IBM, DELL, BBC, NBC, ESPN, EASport, Twitter, Facebook, Amazon, Time, Youtube,
Apple, WordPress, Mozilla, Netflix, Digg, Technorati, dan masih banyak lagi.. bahkan
website local pun tidak mau ketinggalan,lihat saja detik, Studio21(21cineplex.com), indosiar,
Vivanews, Kompas dan masih banyak lagi. Pengertian jQuery | Fitur dan
kelebihan jQuery-,
Semenjak dirilis pertama kali pada tahun 2006 oleh john Resig, jQuery
telah mencuri perhatian pada developer web. buktinya, pada tahun-
tahun berikutnya jQuery telah banyak di gunakan oleh website-website
terkemuka di dunia seperti Google, microsoft, Intel, Nokia, Oracle, IBM,
DELL, BBC, NBC, ESPN, EASport, Twitter, Facebook, Amazon, Time,
Youtube, Apple, WordPress, Mozilla, Netflix, Digg, Technorati, dan
masih banyak lagi.. bahkan website local pun tidak mau
ketinggalan,lihat saja detik, Studio21(21cineplex.com), indosiar,
Vivanews, Kompas dan masih banyak lagi.

9. Dan Sampai saat ini sudah tercatat ada jutaan website yang telah menggunakan jQuery. untuk lebih jelasnya sobat bisa lait ja
di docs.jQuery. jadi jika kita ngaku-ngaku sebagai seorang developer web belum kenal ama jQuery,waduhhhh bisa dikatain
KUPER(kagak gaul)..oleh karena itu mari sob kita jelajahi dunia jQuery ini dengan penuh keindahan.
Jika kita udah tau website-webstite ternama yang menggunakan jQuery,,pertanyaannya Apa
sih pengertian jquery..?
JQuery adalah library Javascript yang dibuat untuk memudahkan pembuatan website dengan HTML yang berjalan di sisi Client.
Script JQuery dibuat untuk memudahkan pengaturan document seperti menyeleksi object dengan element DOM dan membuat
aplikasi dengan AJAX. Jquery juga menyediakan layanan atau support para developers untuk membuat plug-ins di dalam
bahasa Javascript tentunya. Sehingga memungkinkan para developer website membuat website lebih interaktif dengan animasi,
efek – efek, tema dan widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis atau
website aplikasi menjadi Powerfull..!
Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft awalnya mengadopsinya dalam
Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan
mengintegrasikannya dalam kerangka Web Run-Time mereka.
Berikut ini beberapa Fitur yang ada di JQuery :
•Dalam Pemakaian menggunakan seleksi element DOM, sehingga website lebih dinamis dan interaktif.
•JQuery bisa memanipulasi Class pada CSS dan Support CSS 3
•Event
•AJAX
•Efek-efek dan animasi
•Ekstensi dan Plug-ins
•Kompatibilitas dengan hampir semua Browser modern
•Keperluan lain seperti : User Agent, Feature detection dan lainnya

10. Bab II
 Pembuatan perancangan aplikasi
Web ini adalah web yang bertema kan sebuah
penjualan online yang menjual barang seperti
sepatu,jam tangan,baju ,kerudung(jilbab) dll.

11. 3. Virtual server (tomcat/apache)
pengertian apache/tomcat
Apache Tomcat (atau Jakarta Tomcat atau hanya Tomcat)
adalah sebuah servlet kontainer open source yang
dikembangkan oleh Apache Software Foundation (ASF). Tomcat
menerapkan Java Servlet dan JavaServer Pages (JSP)
spesifikasi dari Sun Microsystems, dan menyediakan sebuah
"Pure Java" HTTP lingkungan web server untuk menjalankan
kode Java.
 Tomcat tidak boleh disamakan dengan server web Apache,
yang merupakan implementasi C dari web server HTTP;
kedua server web tidak dibundel bersama. Apache Tomcat
mencakup perangkat untuk konfigurasi dan manajemen,
tetapi juga dapat dikonfigurasi dengan mengedit file
konfigurasi XML.
 Tomcat versi 4.x dirilis dengan komponen diantaranya
Catalina (wadah servlet), Coyote (konektor HTTP) dan Jasper
(mesin JSP).

12.  4. Plug ins
Pengertian plugin adalah program tambahan yang disisipkan
atau didaftarkan agar dikenal oleh browser web, sehingga
menambahan kemampuan standar suatu browser web.
Kemampuan tambahan yang diberikan oleh plugin adalah
kemampuan untuk dapat menyajikan suatu komponen multimedia
multimedia yang tidak standar dalam suatu dokumen HTML yang
disajikan dalam browser pengakses web.

13. 5.Flowchart

14. 6. Struktur tabel basis data ( database )
Basis data dan teknologinya telah memainkan peran penting
seiring dengan pertumbuhan penggunaan komputer. Basis data
telah digunakan pada hampir seluruh area dimana komputer
digunakan, termasuk bisnis, teknik, kesehatan, hukum,
pendidikan dan sebagainya.
Kata basis data dapat didefinisikan sebagai kumpulan data yang
saling berhubungan. Sedangkan kata data dapat didefinisikan
sebagai fakta yang direkam atau dicatat. Sebagai contoh adalah
nama, nomor telepon, dan alamat dari orang-orang yang anda
kenal. Anda mungkin telah merekam data ini pada buku alamat,
atau anda dapat menyimpannya dalam disket, menggunakan
komputer personal dan perangkat lunak seperti dBASE IV,

15. Berikut ini adalah struktur tabel basis data(database)
database tabel barang.

16. Berikut ini adalah struktur tabel basis data(database)
database tabel komentar.

17. Berikut ini adalah struktur tabel basis data(database)
database tabel member.

18. Berikut ini adalah struktur tabel basis data(database)
database tabel pemesanan.

19. Desain interface
home dan komentar

20. Desain interface
login dan tampilan registrasi

21. Pembuatan project
Project home

22. Project Photos

23. Project Froms

24. Project logout

25. Mengkoneksi database ke web