SlideShare ist ein Scribd-Unternehmen logo
1 von 26
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
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
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
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 .
1.JIKA ANDA INGIN MEMBUAT SEBUAH WEB YANG HARUS ANDA LAKUKAN PERTAMA YAITU MENGINSTALL
TERLEBIH DAHULU APLIKASI-APLIKASI YANG DI BUTUH KAN SEPERTI :
2.APA BILA SEBUAH WEB MENGGUNAKAN DREAM WEAVER MAKA INSTALL TERLEBIH DAHULU,JIKA
TIDAK MAKA MENGGUKAN NOTEPAD.
3.DAN JIKA TIDAK MENGGUNAKAN DREAM WEAVER DALAM PEMBUATAN SEBUAH APLIKASI WEB MAKA
MENGGUNAKAN NOTEPAD :
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.
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
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.
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).
 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.
5.Flowchart
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,
Berikut ini adalah struktur tabel basis data(database)
database tabel barang.
Berikut ini adalah struktur tabel basis data(database)
database tabel komentar.
Berikut ini adalah struktur tabel basis data(database)
database tabel member.
Berikut ini adalah struktur tabel basis data(database)
database tabel pemesanan.
Desain interface
home dan komentar
Desain interface
login dan tampilan registrasi
Pembuatan project
Project home
Project Photos
Project Froms
Project logout
Mengkoneksi database ke web
Tutorial web site aida dan jesika

Weitere ähnliche Inhalte

Was ist angesagt?

Proyek+membangun+cms+tanpa+oop
Proyek+membangun+cms+tanpa+oopProyek+membangun+cms+tanpa+oop
Proyek+membangun+cms+tanpa+oop
Telkomsat
 
Buku tips & trik adobe dreamweaver cs5.5 2012_roki
Buku tips & trik adobe dreamweaver cs5.5 2012_rokiBuku tips & trik adobe dreamweaver cs5.5 2012_roki
Buku tips & trik adobe dreamweaver cs5.5 2012_roki
Amri Amri
 

Was ist angesagt? (20)

modul pemrograman web dengan dreamweaver, sql & php
modul pemrograman web dengan dreamweaver, sql & phpmodul pemrograman web dengan dreamweaver, sql & php
modul pemrograman web dengan dreamweaver, sql & php
 
Makalah Desain web menggunakan dreamweaver 8
Makalah Desain web menggunakan dreamweaver 8Makalah Desain web menggunakan dreamweaver 8
Makalah Desain web menggunakan dreamweaver 8
 
Menjadi webmaster dalam 30 hari
Menjadi webmaster dalam 30 hariMenjadi webmaster dalam 30 hari
Menjadi webmaster dalam 30 hari
 
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...
 
Modul dasar pemrograman web
Modul dasar pemrograman webModul dasar pemrograman web
Modul dasar pemrograman web
 
Modul pemrograman web
Modul pemrograman webModul pemrograman web
Modul pemrograman web
 
Asas cakephp-mvc
Asas cakephp-mvcAsas cakephp-mvc
Asas cakephp-mvc
 
Modul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQLModul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQL
 
Proyek+membangun+cms+tanpa+oop
Proyek+membangun+cms+tanpa+oopProyek+membangun+cms+tanpa+oop
Proyek+membangun+cms+tanpa+oop
 
Pengenalan Macromedia Dreamweaver
Pengenalan Macromedia DreamweaverPengenalan Macromedia Dreamweaver
Pengenalan Macromedia Dreamweaver
 
Sisfo akademik #1 - data kelas
Sisfo akademik #1 - data kelasSisfo akademik #1 - data kelas
Sisfo akademik #1 - data kelas
 
Modul web design - studi kasus website portal berita
Modul web design - studi kasus website portal beritaModul web design - studi kasus website portal berita
Modul web design - studi kasus website portal berita
 
P9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisP9 desain-web-statis-dinamis
P9 desain-web-statis-dinamis
 
Tugas 2 0317 individu
Tugas 2 0317 individuTugas 2 0317 individu
Tugas 2 0317 individu
 
Buku tips & trik adobe dreamweaver cs5.5 2012_roki
Buku tips & trik adobe dreamweaver cs5.5 2012_rokiBuku tips & trik adobe dreamweaver cs5.5 2012_roki
Buku tips & trik adobe dreamweaver cs5.5 2012_roki
 
Laporan Aplikasi Website
Laporan Aplikasi WebsiteLaporan Aplikasi Website
Laporan Aplikasi Website
 
E commerce dengan php mysql.docx
E commerce dengan php mysql.docxE commerce dengan php mysql.docx
E commerce dengan php mysql.docx
 
Entri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQuery
Entri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQueryEntri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQuery
Entri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQuery
 
Adit
AditAdit
Adit
 
Java web application 2 - membuat template web
Java web application 2 - membuat template webJava web application 2 - membuat template web
Java web application 2 - membuat template web
 

Ähnlich wie Tutorial web site aida dan jesika

laporan aplikasi
laporan aplikasilaporan aplikasi
laporan aplikasi
Fitra Sani
 
Muhammad sugiantoro 1210651165 rangkuman pbw
Muhammad sugiantoro 1210651165 rangkuman pbwMuhammad sugiantoro 1210651165 rangkuman pbw
Muhammad sugiantoro 1210651165 rangkuman pbw
sugi fener
 
Makalah J query dan penggunaannya sebagai validasi form
Makalah J query dan penggunaannya sebagai validasi formMakalah J query dan penggunaannya sebagai validasi form
Makalah J query dan penggunaannya sebagai validasi form
Hutommo Bagus
 

Ähnlich wie Tutorial web site aida dan jesika (20)

Tugas Pw Kel 3
Tugas Pw Kel 3Tugas Pw Kel 3
Tugas Pw Kel 3
 
Tugas Pw Kel 3
Tugas Pw Kel 3Tugas Pw Kel 3
Tugas Pw Kel 3
 
Tugas Pw Kel 3
Tugas Pw Kel 3Tugas Pw Kel 3
Tugas Pw Kel 3
 
Cover
CoverCover
Cover
 
laporan aplikasi
laporan aplikasilaporan aplikasi
laporan aplikasi
 
Cover
CoverCover
Cover
 
Nur wihdatulhasanah 1210651077_tugas pbw
Nur wihdatulhasanah 1210651077_tugas pbwNur wihdatulhasanah 1210651077_tugas pbw
Nur wihdatulhasanah 1210651077_tugas pbw
 
Muhammad sugiantoro 1210651165 rangkuman pbw
Muhammad sugiantoro 1210651165 rangkuman pbwMuhammad sugiantoro 1210651165 rangkuman pbw
Muhammad sugiantoro 1210651165 rangkuman pbw
 
1110651065 risqy dwi.a
1110651065 risqy dwi.a1110651065 risqy dwi.a
1110651065 risqy dwi.a
 
Makalah J query dan penggunaannya sebagai validasi form
Makalah J query dan penggunaannya sebagai validasi formMakalah J query dan penggunaannya sebagai validasi form
Makalah J query dan penggunaannya sebagai validasi form
 
Web 2
Web 2Web 2
Web 2
 
Web 2
Web 2Web 2
Web 2
 
Pemrograman Web Dinamis
Pemrograman Web DinamisPemrograman Web Dinamis
Pemrograman Web Dinamis
 
Tugas 3 – 0317 (individu)
Tugas 3 – 0317 (individu)Tugas 3 – 0317 (individu)
Tugas 3 – 0317 (individu)
 
Tugas i rekayasa web arie firmandani
Tugas i rekayasa web arie firmandaniTugas i rekayasa web arie firmandani
Tugas i rekayasa web arie firmandani
 
SESI 3 FE.pptx
SESI 3 FE.pptxSESI 3 FE.pptx
SESI 3 FE.pptx
 
Bab 1 Teknologi Web
Bab 1   Teknologi WebBab 1   Teknologi Web
Bab 1 Teknologi Web
 
Tugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art davidTugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art david
 
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...
 
Tugas rekayasa web
Tugas rekayasa webTugas rekayasa web
Tugas rekayasa web
 

Kürzlich hochgeladen

HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptHAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
nabilafarahdiba95
 

Kürzlich hochgeladen (20)

PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
 
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
 
Pelaksana Lapangan Pekerjaan Jalan .pptx
Pelaksana Lapangan Pekerjaan Jalan .pptxPelaksana Lapangan Pekerjaan Jalan .pptx
Pelaksana Lapangan Pekerjaan Jalan .pptx
 
Kanvas BAGJA prakarsa perubahan Ahyar.pdf
Kanvas BAGJA prakarsa perubahan Ahyar.pdfKanvas BAGJA prakarsa perubahan Ahyar.pdf
Kanvas BAGJA prakarsa perubahan Ahyar.pdf
 
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptxDEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
 
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.pptLATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
 
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptHAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
 
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
 
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
 
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdfSalinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
 
power point bahasa indonesia "Karya Ilmiah"
power point bahasa indonesia "Karya Ilmiah"power point bahasa indonesia "Karya Ilmiah"
power point bahasa indonesia "Karya Ilmiah"
 
DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024
DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024
DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024
 
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptx
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptxPPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptx
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptx
 
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptxPendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
 
vIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxvIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsx
 
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdfProv.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
 
Aksi Nyata Disiplin Positif Keyakinan Kelas untuk SMK
Aksi Nyata Disiplin Positif Keyakinan Kelas untuk SMKAksi Nyata Disiplin Positif Keyakinan Kelas untuk SMK
Aksi Nyata Disiplin Positif Keyakinan Kelas untuk SMK
 
KELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKA
KELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKAKELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKA
KELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKA
 
PEMANASAN GLOBAL - MATERI KELAS X MA.pptx
PEMANASAN GLOBAL - MATERI KELAS X MA.pptxPEMANASAN GLOBAL - MATERI KELAS X MA.pptx
PEMANASAN GLOBAL - MATERI KELAS X MA.pptx
 
Modul Projek - Batik Ecoprint - Fase B.pdf
Modul Projek  - Batik Ecoprint - Fase B.pdfModul Projek  - Batik Ecoprint - Fase B.pdf
Modul Projek - Batik Ecoprint - Fase B.pdf
 

Tutorial web site aida dan jesika

  • 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.
  • 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.
  • 20. Desain interface login dan tampilan registrasi