Laman Web : Order

Ini pula merupakan post mengenai paparan Order di laman web saya. Di laman order ini, pengguna boleh mengorder barangan yang mereka mahu dari Butik SitiValet

Ini adalah paparan jika user tidak log in dahulu sebelum klik untuk order

Jika anda klik pada gambar, ia akan terus keluar ke paparan order

Dan apabila user klik pada 'order', ia akan keluar begini sebagai tanda barang yang diorder tadi telah disahkan

Laman Web : Log In & Register

Ini merupakan post tentang Log In & Register. Di bawah merupakan contoh laman web yang saya buat ;

Ini merupakan paparan untuk log in. Bagi pengguna yang sudah mempunya akaun SitiValet, mereka harus memasukkan ID dan kata laluan mereka. Setelah itu, laman home akan keluar setelah mereka telah selesai log in.

Ini pula merupakan paparan untuk register ataupun sign up. Paparan ini bagi mereka yang mahu mendaftar menjadi ahli SitiValet. Ini kerana pengguna harus menjadi ahli jika ingin membeli pakaian dari butik kami. Bagi yang bukan ahli, mereka hanya boleh melihat sahaja pakaian yang ada namun mereka tidak boleh mengordernya.

# Pada laman ini, saya mahu kongsikan kepada anda bagaimana mahu membuat button create dan log in di atas bertukar warna apabila anda gerakkan mouse di situ.

Ini merupakan codingnya ;

nav li {

list-style:none ; 

display:inline-block;

font-size:20px ;

padding:12px;

background:#F5DEB3 ; }  -

itu adalah warna pertama

nav ul {

text-align:center ;}

nav li:hover {

background: #D8BFD8 ;} - 

warna setelah button disentuh dengan mouse

nav a {

text-decoration:none; }

________________________

Laman Web : SitiValet

Laman ini bernama Siti Valet di mana Siti diambil dari nama saya. Dalam laman ini saya cuba untuk membawa konsep vintage (tapi macam tak sampai je konsep tu). Saya gunakan campuran elemen pink, putih dan warna yang sewaktu dengannya untuk siapkan laman ini.

            Saya menggunakan notepad++ dan code html serta sedikit css.

 

 

1. Mula-mula saya design dulu laman saya di kertas a4 putih.

2. Setelah itu, barulah saya mula menaip coding.

3. Setelah siap, saya membetulkan kembali laman saya agar menjadi responsive.

Laman Web : Product

Bismillah & hye, saya akan update lagi sebab kat asrama nanti tiada kemudahan internet dan saya ada banyak kerja sekolah yang kena hantar esok jadi malam ni memang tak boleh nak update jadi saya gunakan kesempatan di dalam kelas untuk update. Ini merupakan tentang laman PRODUCT di mana barangan , pakaian pakaian yang dijual di SitiValet :)

 

 

di sini, saya ingin tunjukkan bahawa jika mouse diklik pada setiap gambar dalam product, ia akan menjadi besar. Contoh, seperti dalam gambar. Saya akan tunjukkan contoh coding untuk besarkan image :

img:hover {

    -o-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -webkit-transition: all 0.3s;

    -moz-transform: scale(1.2);

    -o-transform: scale(1.2);

    -webkit-transform: scale(1.2); }

* disarankan untuk copy semua coding ini

__________________

o - untuk internet explorer

moz - untuk mozzila

webkit - untuk google chrome

(makanya jika anda letak semua itu iaitu o, moz dan webkit seperti contoh yang saya tunjukkan, ia akan berjalan tak kira mana pun anda buka browser. Andai kata anda hanya letak pada moz, nanti jika pengguna buka menggunakan browser google chrome, coding besarkan gambar ini tidak akan terjadi)

Laman Web : About Us

Bismillah & hye, seperti yang saya janjikan saya akan update tentang cara cara membuat laman web saya seperti arahan En. Zain. Pada hari ini, saya akan update mengenai laman about us yang telah saya buat. Dalam laman index ini, saya menggunakan coding css dan html. Untuk css saya gunakan css external dan inline. 

 

  

buat pengetahuan semua, kami hanya diajar coding html sahaja pada sem 2 dan c++ pada sem 3. kini, di sem 4 kami belajar php. kami tidak diajarkan css, kami mencari sendiri pengetahuan itu dengan melihat tutorial dari pelbagai laman dan contoh coding. Anda boleh refer dekat www.w3schools.com 

 -- di sini terdapat  banyak info mengenai coding --

Laman Web : Cara Responsive kan Laman Product

Pada mulanya saya gunakan table untuk letakkan gambar produk dalam laman SitiValet namun ianya tidak responsive jadi saya terpaksa menggunakan css yang saya belajar dari laman web. Buat pengetahuan semua, laman yang responsive ialah laman di mana jika ada gambar, apabila kita kecilkan ia akan turut mengecil. Sebagai contoh ;

Ini merupakan gambar-gambar dalam laman Product saya. Ini merupakan resolution yang selalunya dipakai

Ini pula resolution bagi telefon atau android yang resolutionnya kecil dari kompter atau laptop yang kita selalu pakai

Di bawah ini saya akan kongsikan codingnya ;

 <div class="row">

 <div class="card">

 <figure>

<a href="order1.html"><img src="product/1.jpg"></a>

 <figcaption>

 <b>The Camille Jumpsuit</b> <br>

 <b>Price :</b> RM 140.00 <br>

</figcaption>

 </figure>

 </div>

 <div class="card">

 <figure>

 <a href="order2.html"><img src="product/5.png"></a>

 <figcaption>

 <b>The Isabelle Top</b> <br>

<b>Price :</b> RM 115.00 <br>

 <b>Size :</b> S , M only <br>

 </figcaption>

 </figure>

 </div>

</div>

==============

Untuk contoh bagi coding di atas ;

<div class="card">

Sebagai pemula codingnya. Dengan masukkan gambar dan caption.

=================

+++ CSS +++

***CARD***

.card{

position:relative;

display:inline-block;

margin:0;

width:300px;}

.card figure{margin:10px;}

.card figure img{

width:100%;

display:block;

position:relative;

text-align:center;}

________

***FigCaption***

figcaption {

 text-align:center ;

 font-family : Calibri Light ;

 font-size : 20px ;

 color : black}

+ Figcaption ini untuk letak caption 

(sebenarnya figcaption merupakan code html tapi ini saya gunakan dia sebagai css)

__ - Ini merupakan html sahaja manakala 'figcaption' dan 'card' barulah adanya terselit sedikit css - __

Laman Web : Index aka Home

Bismillah, hye, seperti yang saya janjikan saya akan update tentang cara cara membuat laman web saya seperti arahan En. Zain. Pada hari ini, saya akan update mengenai laman index aka home yang telah saya buat. Dalam laman index ini, saya menggunakan coding css dan html. Untuk css saya gunakan css external dan inline

Di sini, saya akan menunjukkan anda coding menarik yang ada di footer laman web saya iaitu bila anda letakkan mouse pada gambar, ia akan keluar perkataan. p/s ia bukan sahaja boleh digunakan di footer, malah di bahagian mana-mana pun boleh.

Saya akan kongsikan codingnya dengan anda ;

<img src="image/insta.png" title="insta : ctvalet_"> 

_____________________________

Anda boleh meletakkan apa-apa sahaja perkataan di situ sama ada sebelum src ataupun selepas src dan ia akan keluar apabila anda letakkan mouse di gambar itu. Buat pengetahuan anda, ini bukanlah css.

Hye October

         
          Bismillah, mulai hari ini, saya akan up sikit-sikit mengenai perjalanan kerja saya dalam menyiapkan laman web yang diberi oleh En. Zain bagi tugasan KPD saya yang menggunkan ;

1. HTML
2. CSS