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 &copy; 2014 BERLIA ONLINE SHOP<br>Yogyakarta Indonesia</div>
</div>

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

Sekian dan terima kasih untuk postingan yang telah saya buat.

Posted by at No comments:

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.
Posted by at 2 comments:

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.
Posted by at No comments:

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
}
Posted by at No comments:

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.
Posted by at No comments:
Subscribe to: Posts (Atom)