1 Teknik Informatika D3 Pengembangan Sistem E-Commerce Pengenalan E-Commerce dan HTML 5 Disusun Oleh: Egia Rosi Subhiyakto, M.Kom, M.CS Teknik Informa...
• Toleransi kehadiran 15 menit • Dilarang melakukan plagiat pada tugas besar • Wajib mengikuti Responsi Tugas Besar dan presentasi • Kontrak kuliah bisa berubah sesuai kesepakatan
dengan dosen pengampu
Untuk semua perkuliahan yang saya ampu WAJIB memiliki akun Edmodo, dan bergabung sesuai kode kelas masing-masing Berikut kode kelasnya: • RPL 4401 : • RPL 4406 : • OOAD 4801 : • OOAD 4802 : • SRE 4804 : • E-Commerce :
byk639 jti8fu kj355c rir8qt 2a3zbu ktnezp
Setiap Tugas akan di umumkan dan di upload via Edmodo, Harap di catat kodenya dan segera bergabung
REFERENSI • Modul Pengembangan E-Commerce • Slide perkuliahan
SILABUS MATA KULIAH 1. 2. 3. 4. 5. 6. 7.
Pengenalan E-Commerce dan HTML 5 Koneksi Basis Data dan Inklusi Berkas Simpel Input-Output Form Katalog dan Produk Upload dan Manajemen Berkas Image Implementasi Javascript Manajemen Akses Pengguna Integrasi Halaman Administrator
E-Commerce
Apa itu E-Commerce? Electronic commerce didefinisikan sebagai proses pembelian dan penjualan produk, jasa dan informasi yang dilakukan secara elektronik dengan memanfaatkan jaringan computer. E-commerce menyediakan kemampuan untuk menjual dan membeli produk serta informasi melalui internet dan jaringan
jasa online lainnya.
Apa itu E-Commerce? Seluruh komponen yang terlibat dalam bisnis praktis diaplikasikan disini, seperti customer service, produk yang tersedia, cara pembayaran, jaminan atas produk yang dijual, cara promosi dan sebagainya.
Fitur E-Commerce 1. Tampilan Produk 2. Keranjang Belanja 3. Proses Checkout 4. Alamat Pengiriman 5. Metode Pengiriman
6. Metode Pembayaran 7. Ringkasan Order 8. Dan lain-lain
HTML 5 (Basic Atribut, Elemen, Form dan Basic Layout)
Apa itu HTML?
Apa itu HTML? HTML adalah bahasa markup untuk menggambarkan dokumen web (halaman web). HTML
merupakan
singkatan
dari
Hyper
Text
Markup
Language Sebuah bahasa markup terdiri dari seperangkat tag markup
Dokumen HTML dijelaskan oleh tag HTML Setiap tag HTML menjelaskan isi dokumen yang berbeda
Apa itu HTML? Adapun versi dari HTML sekarang sudah mencapai versi ke -5 . Dari gambar berikut dapat kita lihat berbagai versi dari HTML dari pertama kali keluar hingga versi sekarang.
Contoh Sintax Dasar HTML 5 Contoh sintax dasar dari html 5 dapat dilihat pada gambar berikut
Contoh Sintax Dasar HTML 5
Penjelasan dari gambar di atas Deklarasi mendefinisikan tipe dokumen yakni HTML 5 Teks di antara dan menjelaskan dokumen web Teks di antara dan menggambarkan isi halaman yang terlihat Teks di antara
dan
menggambarkan heading yang bertipe 1 Teks di antara
dan
menjelaskan paragraf
Contoh Sintax Dasar HTML 5 Dengan menggunakan tag-tag tersebut maka browser dapat menampilkan dokumen berupa judul dan paragraph. Seperti yang dapat dilihat pada gambar berikut:
Biasakan menggunakan huruf kecil ketika menulis atribut dan element pada HTML.
Aturan Standard Penulisan HTML5 • HTML5 harus diawali dengan • Kebanyakan tag HTML berpasangan seperti : o
• Jika ada tag yang tidak berpasangan maka cara menulisnya adalah : o bukan o bukan • Setiap tag dapat memiliki attribut yang ditulis menggunakan huruf kecil dan nilainya diapit apostrof o , … , <script type=“…”> … ,
…
Aturan Standard Penulisan HTML5 • Semua yang berhubungan dengan format tampilan, dikendalikan dengan menggunakan CSS. • Dus, beberapa tag berikut sudah dinyatakan obselete : o , ,
, , , dan tag format
sejenis lainnya. • Tag dan <marque> juga sudah dianggap obselete karena merusak arti (meaning) dari HTML.
• Namun karena standard HTML5 masih belum selesai, dan juga tidak ada browser yang mensupport penuh HTML5, untuk masa transisi tag-tag tersebut mungkin masih bisa diterjemahkan dengan baik oleh browser.
Aturan Standard Penulisan HTML5 • Sebuah halaman HTML paling sederhana mengandung tag , , dan .:Judul Website:.
The first paragraph of an HTML page.
Here goes the second one.
Elemen Body • Elemen … merupakan letak elemen visual yang ditampilkan oleh browser. • Setiap elemen bisa diberikan atribut “id” dan “class”. • Beberapa contoh elemen yang bisa dituliskan di dalam elemen body adalah : Tag Elemen
Teks di antara tag tersebut ditampilkan tanpa format
Elemen Head • Sebaliknya elemen … digunakan untuk menuliskan elemen yang tidak ditampilkan secara visual oleh web browser, namun informasinya penting untuk perangkat lunak lain seperti web-crawler. • Beberapa contoh elemen yang bisa dituliskan di dalam elemen header adalah : Tag Elemen
Kegunaan
…
Mendefinisikan judul dari dokumen
…
Biasanya digunakan untuk memasukkan CSS
<meta> …
Mendefinisikan metadata halaman tersebut
<script> …
Biasanya digunakan untuk memasukkan JS
<style> …
Menuliskan CSS di dalam dokumen tersebut
Attribut HTML Images Contoh cara penulisan attribute HTML Images sebagai berikut:
Attribut HTML Link Contoh cara penulisan attribute HTML Link sebagai berikut:
Attribut HTML Headings Heading pada HTML terdiri dari
sampai
. Cara penulisannya sebagai berikut:
Elemen HTML dan Elemen HTML <head><br />
<br />
tidak ada hubungannya dengan<br />
<br />
judul HTML. HTML <head> hanya berisi meta data. Elemen HTML <head> ditempatkan antara tag <html> dan tag <body>. Sementara<br />
<br />
HTML <title> element adalah meta data yang<br />
<br />
mendefinisikan ditampilkan<br />
<br />
judul dokumen HTML dan<br />
<br />
tidak<br />
<br />
akan<br />
<br />
dalam dokumen. Namun, mungkin akan<br />
<br />
ditampilkan di salah satu tab browser .<br />
<br />
Elemen HTML <head> dan <title> Contoh pemakaian elemen <head> dan <title> sebagai berikut:<br />
<br />
Elemen HTML List HTML List berfungsi untuk membuat daftar urutan menggunakan penomoran maupun symbol.<br />
<br />
dengan<br />
<br />
A. Ordered List<br />
<br />
• Ordered List berfungsi untuk membuat daftar list dimana tiap bagian akan diberi penomoran, tag diawali dengan <ol> dan diakhiri dengan </ol>.<br />
<br />
• Untuk tiap bagian diawali dengan <li> dan diakhiri dengan </li>. • Penomoran list secara default akan diawali dengan angka 1 / dengan attribute type = "1”.<br />
<br />
Elemen HTML List Macam – macam attribute untuk penomoran pada Ordered List antara<br />
<br />
lain: Jika anda ingin format penomoran dengan huruf A, B, C maka attribute yang digunakan adalah type = “A”<br />
<br />
Jika anda ingin format penomoran dengan huruf i, ii, iii maka attribute yang digunakan adalah type = “i” Jika anda ingin format penomoran dengan huruf I, II, III maka<br />
<br />
attribute yang digunakan adalah type = “I” Jika anda ingin format penomoran dengan huruf a, b, c attribute yang digunakan adalah type = “a”<br />
<br />
maka<br />
<br />
Elemen HTML List Contoh penulisan sintax ordered list sebagai berikut:<br />
<br />
Elemen HTML List B. Unordered List Unordered List berfungsi untuk membuat daftar list dimana tiap bagian tidak akan diberi penomoran, tag diawali dengan <ul> dan diakhiri dengan </ul>. Untuk tiap bagian<br />
<br />
diawali dengan <li> dan diakhiri dengan<br />
<br />
</li>.<br />
<br />
Penomoran list secara default menggunakan lingkaran/ dengan attribute type = "circle”.<br />
<br />
Elemen HTML untuk Style Untuk contoh pemanfaatan style – style yang ada pada HTML sebagai berikut: 1. Style pada Body Background Color<br />
<br />
Elemen HTML untuk Style Untuk contoh pemanfaatan style – style yang ada pada HTML sebagai berikut: 2. Style color pada Paragraf dan Heading<br />
<br />
Elemen HTML untuk Style Untuk contoh pemanfaatan style – style yang ada pada HTML sebagai berikut: 3. Style pada Paragraf dan Heading<br />
<br />
Elemen HTML untuk Style Untuk contoh pemanfaatan style – style yang ada pada HTML sebagai berikut: 4. Style font size pada Paragraf dan Heading<br />
<br />
Elemen HTML untuk Style Untuk contoh pemanfaatan style – style yang ada pada HTML sebagai berikut: 5. Style text align pada Paragraf dan Heading<br />
<br />
Latihan • Beri background warna pada short story dibawah ini (Lanjutkan yang tadi Anda buat)<br />
<br />
Little Women by Louisa May Alcott<br />
<br />
Published in 1868, Little Women follows the lives, loves and tribulations of fours sisters growing up during the American Civil War.<br />
<br />
Latihan • • • •<br />
<br />
Tulis short story dibawah ini dengan ketentuan : Font : Arial Size & Color : Bebas Terapkan tag style 1 dan style 2 pada pemilihan font<br />
<br />
Little Women by Louisa May Alcott<br />
<br />
Published in 1868, Little Women follows the lives, loves and tribulations of fours sisters growing up during the American Civil War.<br />
<br />
Latihan BIODATA MAHASISWA UDINUS<br />
<br />
Photo<br />
<br />
Nama Tempat Tanggal Lahir Jurusan Fakultas Hobby : • Fishing • Reading<br />
<br />
: Russell : London, 11 November 2014 : Teknik Informatika : Ilmu Komputer<br />
<br />
Latihan • Buat short story dengan ketentuan : - Dilengkapi Background - Font (meliputi jenis dan ukuran font)<br />
<br />
- Dilengkapi dengan link - Paragraf ditulis dengan rapi (rata kanan, tengah atau kiri) - Tampilan website JELAS untuk dibaca dan dipahami user<br />
<br />
Latihan • Buat short story dilengkapi gambar, cerita berparagraf, dan tampilan sebagai berikut.<br />
<br />
Part One …Next<br />
<br />
Short Story : title IMG<br />
<br />
• part one • part two • part three • part -N<br />
<br />
Part Two … Back | Next Part Three … Back | Next<br />
<br />
HTML Form HTML Form digunakan untuk memberikan data ke sebuah server. Sebuah HTML Form dapat memiliki input-input element antara lain text field, checkbox, radio button, submit button dan lain-lain.<br />
<br />
Sebuah form juga dapat mengandung select lists, textarea, fieldset, legend, dan element label.<br />
<br />
HTML Form Tag yang digunakan untuk membuat HTML Form adalah <form>.<br />
<br />
Elemen <input> HTML Forms Hal yang terpenting dari element form adalah elemen <input>. Elemen <input> digunakan untuk mengambil informasi dari user. Sebuah elemen input dapat dipakai dengan berbagai cara<br />
<br />
tergantung dari tipe attributnya. Sebuah elemen input dapat berupa text field, checkbox, password, radio button, submit button, dan lain - lain.<br />
<br />
Elemen <input> HTML Forms A. Text Field Input yang digunakan akan berupa kotak text:<br />
<br />
Elemen <input> HTML Forms B. Password Field Password field adalah kotak yang ketika anda menuliskan password disitu maka huruf akan diganti dengan simbol lingkaran untuk melindungi tulisan password yang diketik.<br />
<br />
Elemen <input> HTML Forms C. Radio Button Digunakan untuk memilih inputan hanya satu pilihan saja. Contoh: Jenis kelamin.<br />
<br />
Elemen <input> HTML Forms D. Drop Down List / Combo box<br />
<br />
Elemen <input> HTML Forms E. Check box Perbedaan dengan radio button adalah dapat mencentang/ memilih lebih dari satu pilihan.<br />
<br />
Elemen <input> HTML Forms F. Submit Button <input type="submit"> mendefinisikan sebuah submit button.<br />
<br />
Elemen <input> HTML Forms G. Text Area Text Area seperti text field namun bedanya adalah text area dapat terdiri dari beberapa line/ baris dan kolom.<br />
<br />
Elemen <input> HTML Forms H. HTML Tables Tabel didefinisikan dengan tag <table>. Tabel terdiri dari tabel rows / baris dengan tag <tr>. Dan tabel column/ kolom dengan tag <td>. Tabel row/<br />
<br />
baris dapat juga terdiri dari table headings dengan tag <th>.<br />
<br />
HTML Tables • Table pada HTML meliputi : <table border=“1”> - <table> tag <tr> <td>NIM</td> - <tr> tag <td>Name</td> - <td> tag<br />
<br />
NIM<br />
<br />
Nama<br />
<br />
A11.2014.12345 Russell<br />
<br />
</tr> <tr> <td>A11</td> <td>Name</td> </tr> </table><br />
<br />
HTML Tables td td td<br />
<br />
tr<br />
<br />
1 <tr> terdiri dari 3 <td><br />
<br />
Berapa tr ? Berapa td ?<br />
<br />
Latihan • Tabel 1<br />
<br />
• Tabel 2<br />
<br />
• Tabel 3<br />
<br />
Name<br />
<br />
Age<br />
<br />
Russell Michelle Alex<br />
<br />
21 22 25<br />
<br />
Country<br />
<br />
Job<br />
<br />
Indonesia Actor Inggris Supervisor Italia Manager<br />
<br />
Ice Cream Sandwich Jelly Bean Kitkat Lollipop 2010<br />
<br />
2011<br />
<br />
2012<br />
<br />
2013<br />
<br />
Border • Border table pada HTML menggunakan tag border <table border=“1”> <tr> <td>NIM</td> <td>Name</td> </tr> <tr> <td>A11</td> <td>Name</td> </tr> </table><br />
<br />
NIM<br />
<br />
Nama<br />
<br />
A11.2014.12345 Russell<br />
<br />
No Border • No Border table pada HTML menggunakan tag border = 0 atau Tanpa Menyertakan Border <table border=“0”> <tr> <td>NIM</td> <td>Name</td> </tr> <tr> <td>A11</td> <td>Name</td> </tr> </table><br />
<br />
NIM A11.2014.12345<br />
<br />
Nama Russell<br />
<br />
Latihan • Buat identitas menggunakan tabel BIODATA MAHASISWA UDINUS<br />
<br />
Photo<br />
<br />
Nama<br />
<br />
: Russell<br />
<br />
TTL<br />
<br />
:London, 11 November 2014<br />
<br />
Jurusan<br />
<br />
:Teknik Informatika<br />
<br />
Fakultas<br />
<br />
:Ilmu Komputer<br />
<br />
Table<br />
<br />
Heading in Table • Heading pada table menggunakan tag <th> <table border=“1”> <th>NIM</th> <th>Name</th> <tr> <td>A11</td> <td>Name</td> </tr> </table><br />
<br />
NIM Nama A11.2014.12345 Russell<br />
<br />
Cells Spanning Multiple Column • Bagaimana melakukan span pada table ? • Span pada table didefinisikan dengan tag<br />
<br />
colspan / rowspan<br />
<br />
<table border=“0”> <tr> <td>Name</td> <td colspan=“2”>Games</td> </tr> <tr> <td>Russell</td> <td>Clash Of Clans</td> <td>Candy Crush Saga</td> </tr> </table> Name Russel Clash Of l Clans<br />
<br />
Game Candy Crush saga<br />
<br />
Latihan • Buat table dibawah ini<br />
<br />
Name NIM<br />
<br />
First Name<br />
<br />
Last Name<br />
<br />
Country<br />
<br />
Cell Padding & Cell Spacing • Digunakan untuk membuat jarak antar cell • Menggunakan tag cellpadding / cellspacing <table border=“1” cellpadding=“10”> <th>NIM</th> <th>Name</th> <tr> <td>A11</td> <td>Name</td> </tr> </table><br />
<br />
Cell Padding & Cell Spacing • Digunakan untuk membuat jarak antar cell • Menggunakan tag cellpadding / cellspacing <table border=“1” cellspacing=“10”> <th>NIM</th> <th>Name</th> <tr> <td>A11</td> <td>Name</td> </tr> </table><br />
<br />
Table Background • Memberikan background pada tabel seperti background warna atau gambar <table border=“1” bgcolor=“yellow”> <th>NIM</th> <th>Name</th> <tr> <td>A11</td> <td>Name</td> </tr> </table><br />
<br />
Table Background • Memberikan background pada tabel seperti background warna atau gambar <table border=“1” background=“koala.jpg”> <th>NIM</th> <th>Name</th> <tr> <td>A11</td> <td>Name</td> </tr> </table><br />
<br />
Alligning Cell Content • Menerapkan align pada table • Align : left, right, center <table border=“1” bgcolor=“yellow”> <tr> <td align=“center”>NIM</td> <td align=“center”>Name</td> </tr> <tr> <td align=“left”>A11</td> <td align=“left”>Name</td> </tr> </table><br />
<br />
Latihan • Buat table dibawah ini<br />
<br />
ID<br />
<br />
Product<br />
<br />
OS<br />
<br />
Rate/yr Country<br />
<br />
001 Samsung 77% Android 002 LG 65% 003 Blackberry Blackberry Smartphone<br />
<br />
Indonesia<br />
<br />
Latihan Published in 1868, Little Women follows the lives, loves and tribulations of fours sisters growing up during the American Civil War.<br />
<br />
Little Women by Louisa May Alcott 1 The story is based the childhood experiences Alcott shared with her real life sisters, Anna, May and Elzabeth. The novel stars Jo, Meg, Beth and Amy and explores the rich nuances of family and family relationships<br />
<br />
2<br />
<br />
THE END 3<br />
<br />
4<br />
<br />
Latihan Rate of Sales Prediction 2015 :<br />
<br />
Profit 2014: Samsung<br />
<br />
Nokia<br />
<br />
Income 85% 75%<br />
<br />
Outcome 65% 74%<br />
<br />
Samsung Nokia<br />
<br />
Income 105% 95%<br />
<br />
Outcome 75% 84%<br />
<br />
Latihan • Buat table dibawah ini<br />
<br />
ID<br />
<br />
Product<br />
<br />
OS<br />
<br />
Rate/yr Country<br />
<br />
001 Samsung Android 002 LG 003 Blackberry Blackberry Smartphone<br />
<br />
77% 65%<br />
<br />
Indonesia<br />
<br />
Elemen <input> HTML Forms HTML Table dengan attribute Border dan Width Penggunaan border pada contoh, digunakan untuk memberikan garis di sekitar tabel sedangkan style=”width:100%” menunjukkan lebar tabel tersebut adalah 100% dari lebar pixel layar monitor yang digunakan<br />
<br />
saat membuka browser.<br />
<br />
Elemen <input> HTML Forms HTML Table dengan span row (menggabungkan beberapa baris) Gunakan attribute rowspan = “<banyak baris>” untuk menggabungkan beberapa baris dari tabel. Contohnya<br />
<br />
Elemen <input> HTML Forms HTML Table dengan span column (menggabungkan beberapa kolom) Gunakan attribute colspan = “<banyak kolom>” untuk menggabungkan beberapa baris dari tabel. Contohnya<br />
<br />
Elemen <input> HTML Forms HTML Table dengan caption / judul<br />
<br />
Gunakan tag <caption ….</caption> untuk membuat judul pada tabel. Tag <caption..</caption> harus dimasukkan setelah tag <table>. Contohnya<br />
<br />
Elemen <input> HTML Forms HTML Table dengan background color<br />
<br />
Penggunaan attribute bgcolor dapat menggunakan bilangan hexa atau<br />
<br />
dengan nama<br />
<br />
warna<br />
<br />
yang<br />
<br />
sudah<br />
<br />
umum<br />
<br />
“Yellow”, Green”, “Light Green”, dan lain-lain. Contoh<br />
<br />
seperti<br />
<br />
“Red”,<br />
<br />
Di mana PHP-nya? • Kode PHP bisa ditulis di mana saja di antara kode HTML • Boleh juga menuliskan seluruh halaman HTML menggunakan kode pemrograman PHP • Kode PHP harus diapit dengan simbol <?php … ?> • Contoh penulisan PHP di antara kode HTML : <!DOCTYPE HTML> <html> <header> <title> Judul Website
