Mari Berbagi Ilmu: 2014

Tuesday 27 May 2014

Desain Web Toko Online

Untuk final project Pengenalan Perancangan Web (PPW) saya mengambil tema tentang toko online. Ya walaupun desain web yang saya buat tidak sebagus teman-teman yang lain, tapi saya membuatnya dengan hasil tangan saya sendiri. Disini saya menggunakan bahasa pemrograman HTML dan CSS. Sesuai dengan ketentuannya 10 halaman, tapi karena menyesuaikan dengan keadaan desain akhirnya saya membuat 12 halaman. Yaitu, index.html, buy.html, latest/html, hot.html, new.html, info.html, informasi.html, produk.html, about.html, contact.html, profil.html, home.html. Berikut salah satu scriptnya :

<!DOCTYPE html>
<head>
<title>BERLIA ONLINE SHOP</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.gif" type="image/x-icon">
</head>

<body background="images/back.gif">

<div id="kotak">
<div id="logo"></div>
<div id="header">
<div id="menu">
<ul>
<br><br><table bgcolor=#009F00" border="2" width="900" align="center">
<th><a href="home.html">Home</a></th>
<th><a href="profil.html">Profil</a></th>
<th><a href="buy.html">How To Buy</a></th>
<th><a href="about.html">About Us</a></th>
<th><a href="contact.html">Contact Us</a></th>
<th><a href="http://www.amikom.ac.id">Amikom Yk</a></th>
</table>
</ul>
</div>
</div>
<div id="headcont"></div>
<div id="content">
<div id="kiri">
<div id="nav"><a href="produk.html">Product Category</a></div>
<div id="pages">Beauty Product</div>
<div id="pages">Food and Beverages</div>
<div id="pages">for Baby and Kids</div>
<div id="pages">for MOM</div>
<div id="pages">Others</div>

<div id="nav"><a href="new.html">New Products</a></div>
<div id="pages">Dress Korean Kids</div>
<div id="pages">Dress Couple Mom and Kids</div>
<div id="pages">Wedges Metalic Leather</div>
<div id="pages">Sweater Thomas Train</div>
<div id="pages">Lampu Baca Clip On</div>

<div id="nav"><a href="informasi.html">Information</a></div>
<div id="pages">Shipments and Returns</div>
<div id="pages">About Us</div>

</div>
<div id="tengah">
<div id="pages">
<div id="navteng"><a href="hot.html">HOT NEWS</a></div>
<label>
<td><div id="nama"><table border="2"><p align="center">Shawl Siffon Paris</p></table></div></td>
<td><div id="gambar"><table border="2"><img src="produk/shawl1.jpg"><img src="produk/shawl2.jpg"></table></div></td>
<td><div id="harga"><table border="2"><p align="center">Rp. 50.000</p></table></div></td>
<label>
<td><div id="nama"><table border="2"><p align="center">Scarf 2in1</p></table></div></td>
<td><div id="gambar"><table border="2"><img src="produk/shawl3.jpg"><img src="produk/shawl4.jpg"></table></div></td>
<td><div id="harga"><table border="2"><p align="center">Rp. 40.000</p></table></div></td>
<label>
<td><div id="nama"><table border="2"><p align="center">Sweater Thomas Train</p></table></div></td>
<td><div id="gambar"><table border="2"><img src="produk/sweater1.jpg"><img src="produk/sweater2.jpg"></table></div></td>
<td><div id="harga"><table border="2"><p align="center">Rp. 150.000</p></table></div></td>
<label>
<td><div id="nama"><table border="2"><p align="center">Wedges Metalic Leather</p></table></div></td>
<td><div id="gambar"><table border="2"><img src="produk/wedges2.jpg"><img src="produk/wedges3.jpg"></table></div></td>
<td><div id="harga"><table border="2"><p align="center">Rp. 150.000</p></table></div></td>
<label>
<td><div id="nama"><table border="2"><p align="center">Jam Tangan Alexandre Christie</p></table></div></td>
<td><div id="gambar"><table border="2"><img src="produk/jam1.jpg"><img src="produk/jam2.jpg"></table></div></td>
<td><div id="harga"><table border="2"><p align="center">Rp. 150.000</p></table></div></td>
<label>
<td><div id="nama"><table border="2"><p align="center">Blouse Zenitha</p></table></div></td>
<td><div id="gambar"><table border="2"><img src="produk/blouse1.jpg"><img src="produk/blouse2.jpg"></table></div></td>
<td><div id="harga"><table border="2"><p align="center">Rp. 150.000</p></table></div></td>
</div>
</div>

<div id="kanan">
<div id="nav"><a href="#">Login</a></div>
<tr> <td>User Name</td> <td>:</td> <td><input type="text" name="user"></td> </tr> <tr>
<td>Password</td> <td>:</td> <td><input type="password" name="pass"></td> </tr> </table> <br>
<table border="0" align="center"> <tr> <td><input type="submit" value="kirim"></td>
<td><input type="reset" value="reset"></td> </tr>
</table>

<div id="nav"><a href="latest.html">Latest products</a></div>
<div id="pages">Mukena Faira</div>
<div id="pages">Shawl Shiffon RaZha</div>
<div id="pages">Blouse Zenitha</div>
<div id="pages">Scarf 2in1 RaZha</div>
<div id="pages">Rok Zenitha</div>

</div>

<div id="footcont"></div>
<div id="batas"></div>
<div id="footer">Copyright © 2014 BERLIA ONLINE SHOP<br>Yogyakarta Indonesia</div>
</div>

</div>
</body>
</html>

Sekian dan terima kasih untuk postingan yang telah saya buat.

Materi tentang Bootstrap

tampilan web yang menarik merupakan perkara yang penting dalam membangun atau membuat sebuah website. jika tampilan web kita menarik maka orang-orang yang mengunjungi web kita akan nyaman dan pastinya penasaran dengan web yang kita buat. Menggunakan Bootstrap adalah cara mendesain web dengan mudah. Bootstrap merupakan sebuah toolkit yang dikembangkan oleh Twitter buat mempermudah web depelover dalam mendesain tampilan aplikasi. Dengan Bootstrap, developer web bisa menghemat waktu dalam mendesain tampilan aplikasi. Di Bootstrap sudah tersedia CSS, HTML dan juga JQuery Plugin untuk typography, forms, buttons, tables, grids, navigation dan berbagai komponen interface lainnya. Kelebihan utama dari Bootstrap adalah Responsive Layout dan 12-column grid system. Dengan Responsive Layout maka aplikasi web yang didesain dengan menggunakan Bootstrap akan langsung menyesuaikan dengan lebar dari media perambahnya. Sehingga tampilan web akan tetap rapih dibuka dengan media apapun baik itu handphone, tablet, laptop ataupun PC desktop. Jadi, tampilan tidak akan terganggu dengan resolusi dari layar. Sedangkan 12-column grid system sederhananya adalah Bootstrap akan membagi lebar layar menjadi 12 bagian. Sehingga pembagian kolom per kolom tampilan web akan menjadi lebih mudah.

Javascript

Belajar pemrograman web memang bisa dibilang susah-susah gampang. Begitu pula dengan Javascript. JavaScript adalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang dibuka dengan tag <script type="teks/javascript">.

<script type="teks/javascript">

alert("Halo Dunia!");

</script>

Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi . JS (singkatan dari JavaScript).^]Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal <head> harus ditentukan dahulu nama file . JS yang dimaksud menggunakan contoh kode seperti berikut.

<script type="teks/javascript" src="alamat.js">

</script>

Script pada bagian head

Script ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. Peletakkan script di head akan menjamin skript di-load terlebih dahulu sebelum digunakan (dipanggil).

<html>

<head>

<script type="teks/javascript">

...

</script>

</head>

</html>

Script pada Body

Script ini dieksekusi ketika halaman di-load sampai di bagian <body>. Ketika menempatkan script pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian.

<html>

<head>

</head>

<body>

<script type="teks/javascript">

...

</script>

</body>

</html>

Jumlah JavaScript di <head> dan <body> yang ditempatkan pada dokumen tidak terbatas .

Sekian postigan dari saya. bila ada kurang dan salahnya saya mohon maaf. terimakasih.

Sunday 4 May 2014

Server Side Scripting

Server Side Scripting adalah bahasa pemrograman web yang pengolahannya dilakukan di sisi server. Server Side Scripting adalah HTML embedded. yang maksudnya adalah semua Server Side Scripting dapat disisipkan ke dalam dokumen web yang menggunakan HTML atau sebaliknya. contoh server side scripting :
1. Active Server Pages (ASP)

Adalah bahasa pemrograman web milik Microsoft yang berbayar. web engine yang mampu memproses ASP adalah ASP engine yang terdapat satu paket di dalam web server Internet Information Services (IIS) atau yang terdapat dalam web server Personal Web Server (PWS)
2. PHP (Hypertext Proprocessor)
merupakan sebuah bahasa scripting yang terpasang pada HTML. Sebagian besar sintaks mirip dengan bahasa C, Java dan Perl, ditambah beberapa fungsi PHP yang spesifik3. Java Server Pages (JSP)
adalah suatu teknologi berbasis bahasa pemrograman java dan berjalan di platform Java, serta merupakan bagian teknologi J2EE (Java 2 Enterprise Edition). JSP dapat berupa gabungan antara baris HTML dan fungsi-fungsi dari JSP itu sendiri. Java Server Pages (JSP) adalah bahasa scripting untuk web programming yang bersifat server side seperti halnya PHP dan ASP.

Seperti aplikasi Java lainnya JSP jga brsifat strong type artinya penggunaan variable pada halaman tersebut harus dideklarasikan terlebih dahulu. Misalnya pasa syntaks pengulangan berikut :

For int(i=1;i<13;i++)

{

//statement

}

PHP (Hypertext Preprocessor)

PHP (Hypertext Preprocessor) adalah bahasa server-side-scripting yang menyatu dengan HTML untuk membuat halaman web yang dinamis. karena PHP merupakan server-side-scripting maka sintaks dan perintah-perintah PHP kan dieksekusi di server kemudian hasilnya dikirimkan ke browser dalam format HTML. Salah satu keunggulan yang dimiliki yang dimiliki oleh PHP adalah kemampuannya untuk melakukan koneksi ke berbagai macam software sistem manajemen basis data/Database Management System (DBMS), sehingga dapat menciptakan suatu halaman web yang dinamis. PHP mempunyai koneksitas yang baik dengan beberapa DBMS antara lain Oracle, Sybase, mSQL, MySQL, Microsoft SQL Server, Solid, PostgreSQL, Adabas, FilePro, Velocis, dBase, Inix dbm dan tak terkecuali semua database ber-interface ODBC.

Saturday 26 April 2014

membuat FORM pada WEB anda

Form merupakan bagian yang paling penting dalam pemrograman HTML. Form digunakan untuk mengumpulkan data dari pengunjung suatu website. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, form advertiser, form sitemap, bahkan untuk mengirimkan data antar halaman web. Pada tutorial belajar HTML: cara membuat form di HTML ini kita akan membahas cara penggunakan tag form di dalam HTML.

Form meruakan salah satu elemen HTML yang digunakan untuk menerima nput dari pengunjung. Melalui form pengunjung dapat memasukkan data melalui elemen-elemen input seperti textfield, checkbox, radio button, textarea, submit button dan masih banyak lainnya. Form berfungsi untuk membuat sebuah halaman web menjadi interaktif dan dinamis.

Perintah Dasar Form

<form>

.

Input elements

.

</form>

Elemen input Form

Elemen yang paling penting dalam form adalah elemen input. Elemen input digunakan untuk memilih informasi yang dimasukkanoleh pengunjung. Elemen input dapat terdiri dari berbagai macam cara tergantung dari atributnya, seperti jenis text field, checkbox,password, radio button, submit button, dan lainnya.

Text Field

Merupakan elemen input yang memungkinkan pengunjng memasukkan text dalam satu baris. Lebar karakter text field defaultnya adalah 20 karakter.

Perintah Dasar :

<input type=”text” />

Contoh penggunaan :

<form>

First name : <input type=”text” name=”firstname” /><br />

Last name : <input type=”text” name=”lastname” />

</form>

Radio Button

Elemen form yang membolehkan pengunjung memilih satu saja pilihan data dari pilihan data yanng terbatas. Seperti pemilihan jenis kelamin (pria atau wanita).

Perintah Dasar:

<input type=”radio” />

Contoh penggunaan :

Check Box

Digunakan untuk memilih beberapa pilihan data sekaligus atau lebih dari satu pilihan dari daftar pilihan yang ada.

Perintah Dasar:

<form>

<input type="checkbox" name="kendaraan=" value="motor" />

aku naik motor<br />

<input type="checkbox" name="kendaraan=" value="mobil" />

aku naik mobil<br />

<input type="checkbox" name="kendaraan=" value="sepeda" />

aku naik sepeda<br />

<input type="checkbox" name="kendaraan=" value="becak" />

aku naik becak<br />

</form>
hasilnya akan seperti ini :

Submit Button

Digunakan untuk mengirimkan data dari halaman web ke server. Data yang dikirimnkan ke halaman lain yang telah ditentukan pada atribut action di form.

Perintah Dasar:

<input type=”submit” />

Contoh penggunaan :

<form name=”input” action=”proses_input.php” method=”get

Reset Button

Digunakan untuk membatakan semua proses pengisian data yang dilakukan di elemen input form.

Perintah Dasar:

<input type=”reset” />

pengertian dan sejarah CSS

Sejarah CSS (Cascading Style Sheet)

CSS 1

Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.

CSS 1 mendukung pengaturan tampilan dalam hal :

1. Font (Jenis ketebalan).

2. Warna, teks, background dan elemen lainnya.

3. Text attributes, misalnya spasi antar baris, kata dan huruf.

4. Posisi teks, gambar, table dan elemen lainnya.

5. Margin, border dan padiing.

CSS 2

Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.

CSS 3

CSS 3adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.

Fitur terbaru CSS 3 :

1. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight.

2. Beberapa efek teks, seperti teks berbayang, kolom koran dan "Word-Wrap".

3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan.

Pengertian CSS

CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konflik style. CSS yaitu salah satu bahasa pemrograman web yang mengatur komponen dalam suatu web supaya web lebih terstruktur dan lebih seragam. CSS seperti halnya styles pada aplikasi pengolahan kata Microsoft Word yang dapat mengatur beberapa style, misalnya subbab, heading, bodytext, footer, images dan style lainnya untuk dapat dipakai bersama-sama dalam beberapa file. CSS biasanya digunakan untuk memformat tampilan web yang dibuat dengan bahasa HTML dan XHTML. CSS mampu mengatur warna body teks, ukuran gambar, ukuran border, warna mouse over, warna tabel, warna hyperlink, margin, spasi paragraph, spasi teks dan parameter lainnya. Dengan adanya CSS memungkinkan menampilkan halaman yang sama dengan format yang berbeda.

Wednesday 23 April 2014

CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet) adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur, CSS digunakan untuk mempersingkat penulisan tag HTML seperti font, color, text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.
keuntungan menggunakan CSS :
1. Memisahkan presentation sebuah dokumen dari isi dokumen itu sendiri
2. mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web
3. mempercepat proses rendering/pembacaan HTML
4. dapat mengatur dan mengontrol tampilan web
5. CSS membuat tampilan lebih menarik
6. dapat digunakan dalam banyak halaman sekaligus
7. style-style banyak variasinya dan terus berrkembang
8. telah di support oleh sebagian besar web browser (standar W3C)

Cara penulisan CSS ada 3terdiri dari 3 cara, yaitu :
a. inline style sheet
penulisan sintak css di dalam elemen HTML, utnuk metode ini jarang digunakan karena tidak efesien.
contoh syntaks penulisan
<p style=”color: green”> teks ini berwarna hijau </p>

b. embeddef style sheet
Penulisan sintak css didalam dokumen HTML, dengan menggunakan metode ini maka menggunakan tag <style> dan </sttyle>

contoh syntaks penulisan :

H1 {color: red}

</style>

c. linked style sheet
Metode ini adalah penulisan skrip CSS dihalaman yang berbeda atau terpisah dari HTML. Jadi kita dapat melakukan link ke file css yang telah dibuat. Untuk metode satu ini menggunakan tag <link rel> yang ditempatkan pada bagian tag <head>
contoh syntaks penulisan :

Saturday 5 April 2014

HTML 5

Pada pertemuan ke 5 ini kami di ajarkan tentang HTML5. Yang terlintas dalam benak saya adalah apa perbedaan HTML5 dengan HTML versi sebelumnya ??? apa keunggulannya dibandingkan HTML sebelumnya ??

Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

Ada beberapa aturan yang harus dipelajari saat belajar HTML5, yaitu :

Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript.

· Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).

· Lebih baik penanganan kesalahan.

· Lebih banyak penggunaakn markup untuk mengganti scripting.

· HTML5 harus independen.

· Proses development-nya harus terlihat untuk umum (visible).

DOCTYPE UNTUK HTML5

DOCTYPE adalah instruksi untuk web browser tentang apa versi bahasa markup halaman yang ditulis.

Deklarasi DOCTYPE mengacu pada Document Type Definition(DTD).

DTDmenetapkan aturan untuk bahasa markup, sehingga browser dapat membuat konten halaman tersebut dengan benar.

Penggunaan DOCTYPE pada html5 lebih di sederhanakan.

Sintak penulisannya :

<html>

<head>

<meta charset=”UTF-8”>

<title>contoh penulisan untuk HTML 5</title>

</head>

<body>

Materi pertemuan ke 5 tantang HTML 5

</body>

</html>

HTML5 SEMANTIC ELEMENTS

Semantic= arti/makna

Semantic elements = elemen dengan makna

Apa Unsur Semantic?

Unsur semantik jelas menggambarkan maknanya untuk browser dan developer.

Contoh non-semantik elemen:

<div> dan <span> -tidak menjelaskan tentang isinya.

Contoh semantik elemen:

<form>, <table>, dan <img> -Jelas mendefinisikan isinya.

ELEMENSEMANTIKBARUdi HTML5

Banyak situs web yang ada saat ini mengandung kode HTML seperti ini:

<div id="nav">, <div class="header">, atau <div id="footer">, untuk menunjukkan link navigasi, header, dan footer.

HTML5 menawarkan elemen semantik baru untuk mendefinisikan bagian yang berbeda dari sebuah halaman web:

<nav>

<aside>

<time>

dan masih banyak tag-tag lainnya

PENJELASAN TAG-TAG HTML5

<header>, digunakan untuk area header(bagian atas sebuah halaman web).

<article>, untuk tempat meletakkan artikel atau tulisan dihalaman web.

<aside>, digunakan sebagai penambah informasi utama didalam halaman web. Biasanya berupa peringatan, catatan, dll.

<section>, untuk menentukan seksi-seksi dokumen. Misalnya bagian yg mendefinisikan sebagai profil, kontak, berita, dan sebagainya.

<figure>, Menentukan konten mandiri, seperti diagram, foto, daftar kode, dll.

<figcaption>, Mendefinisikan caption untuk elemen <figure>

VIDEO

Digunakan untuk memasukkan video, misalnya ingin memutar video kedalam halaman web.

Pada versi HTML sebelumnya untuk memutar video pada sebuah web menggunakan plugins tambahanyang biasa disebut flash Player.

Tag Video Pada HTML5, setidaknya ada 3 jenis format videoyang mendukung yaitu :

Ogg(File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)

MPEG4(File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)

WebM(File WebM dengan Video Codec VP8 dan Audio Codec Vorbis)(.webm)

Apabila anda mempunyai video dengan format video bukan ogg, mp4, dan webm. Anda bisa menggunakan aplikasi video converter salah satunya miro video converter.

Tag <video>

Sintaks Penulisanya :

</video>

Atau bisa juga dengan syntaks penulisan yang seperti ini :

<videocontrols=”controls”><source src=”judulvideo.mp4” type=”judulvideo.mp4”></video>

AUDIO

Digunakan untuk memasukkan suara/audio, misalnya ingin memutar lagu kedalam halaman web.

Ketika di generasi sebelumnya (HTML 4.01) memasukkan audio ke dalam web masih harus menggunakan flash.

Tag Audio Pada HTML5, setidaknya ada 3 jenis format audioyang mendukung yaitu:Ogg, MP3, Wav.

Tag <audio>

Sintaks Penulisanya :