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

Menambah Macro dalam Switchboard dalam MS Access

1. Anda harus pergi ke ‘create’ dan klik pada ‘switchboard manager’ maka switchboard sedia ada anda akan terbuka.  
   
2. Klik pada ‘new’ dan ia akan keluar box ‘edit switchboard item’. Anda harus namakan item anda dan arahannya. Oleh kerana kita mahu membuat macro maka namakannya sebagai macro pilihan anda. Contoh, saya mahu gunakan macro pelanggan saya maka saya letakkan sebagai ‘pelanggan’ agar nanti saya tidak keliru jika terdapat banyak makro yang saya ingin letakkan di switchboard itu. Setelah itu, plih command ‘run macro’. Setelah itu, anda pilih macro apa yang anda ingin paparkan. Saya memaparkan macro pelanggan saya.  Setelah itu, klik pada ‘ok’  
    
   
3. Setelah itu, ia akan keluar begini. Anda klik pada (default) switchboard anda. Dan klik pada ‘edit’.  
   
4. Ia akan keluar begini. Anda pergi ke ‘new’ untuk menambah page bagi switchboard anda. Page ini untuk diletakkan item-item anda iaitu item macro yang anda buat tadi. Setelah klik ‘new’ ia akan keluar box ‘edit switchboard item’. Namakannya sebagai ‘pergi ke macro’ ataupun ‘macro’ dan commadnya ialah ‘go to switchboard’, ini kerana ‘pergi ke macro’ akan terletak di default switchboard manakala item-item macro akan berada di page Macro. Oleh itu, pilihan switchboard anda ialah macro yang anda telah siap buat tadi.  
   
5. Setelah siap ia akan menjadi begini   
   

20 Post Cikgu Zain

SINGKATAN BAHASA PENGGUNAAN DALAM DATABASE ACCESSIBILITY

   1.    Hyper Text Markup Language (HTML)
   2.    Cascading Style Sheet (CSS)
   3.    Database Development Life Cycle (DLC)
   4.    System Development Life Cycle (SDLC)
   5.    Structured Query Language (SQL)
   6.    Data Control Language (DCL)
   7.    Data Manipulation Language (DML)
   8.    Data Defination Language (DDL)
   9.    Transaction Control Language (TCL)
   10.  Integrated Development Environment (IDE)
   11.  American Standard Code for Information Interchange (ASCII)
   12.  Code Devision Multiple Access (CDMA)
   13.  Digital Living Network Allience (DLNA)
   14.  Domain Name System (DNS)
   15.  Electronicly Earasable Programable Read Only Memory (EEPROM)
   16.  Extandent Binary Codec Decimal Interchange Code (EBCDIC)
   17.  High Defination Multimedia Interface (HDMI)
   18.  Motion Pictures Experts Group (MPEG)
   19.  Open Database Connectivity (ODBC)
   20.  Transmission Controls Protocol (TCP)

DATA CONTROL LANGUAGE (DCL)

DCL merupakan salah satu perintah SQL yang digunakan untuk melakukan satu kawalan pada data yang ada di dalam pangkalan data. Kawalan yang dimaksudkan ialah memberikan privilege atau hak akses kepada user yang akan mengakses data pada suatu pangkalan data.

2 Jenis Sintak DCL

1. GRANT

Perintah GRANT digunakan oleh Admnistor untuk memberikan hak akses kepada pengguna pangkalan data. Cara menulis sintak untuk GRANT ialah;

GRANT [privilege]

ON [object]

TO [user]

[WITH GRANT OPTION]

• Privilege - Merupakan kata kunci ALL (untuk memberikan pelbagai keizinan untuk melakukan apa – apa perubahan pada pangkalan data). Contohnya, CREATE DATABASE, SELECT, INSERT, UPDATE, DELETE, EXECUTE dan CREATEVIEW.

• Object – Merupakan objek pangkalan data. Pilihan hak akses yang tetap akan bervariasi berdasarkan jenis objek pangkalan data yang anda masukkan ke dalam Klaus ON. Biasanya objek yang dimasukkan berupa pangkalan data, fungsi, store procedural, table atau view.

• User – Menjelaskaskan tentang pengguna pangkalan data yang akan diberikan hak akses terhadap pangkalan data.

Contohnya, kita akan memberikan hak akses kepada user “Nurah.lee” hanya untuk melakukan arahan SELECT pada jadual PELAJAR di pangkalan data SEKOLAH.

GRANT SELECT

ON SEKOLAH.PELAJAR

TO liyana

     2. REVOKE

Perintah REVOKE digunakan untuk menghapuskan akses pangkalan data dari pengguna sebelumnya yang telah diberikan keizinan akses GRANT. Cara menulis sintak untuk REVOKE ialah;

REVOKE [GRANT OPTION FOR] [permission]

ON [object]

FROM [user]

[CASCADE]

• Menentukan hak akses pangkalan data yang ingin dihapuskan dari pengguna yang telah diberikan hak GRANT.
• Merupakan objek pangkalan data. Pilihan hak akses yang tetap akan bervariasi berdasarkan jenis objek pangkalan data yang anda masukkan ke dalam Klaus ON. Biasanya objek yang dimasukkan berupa pangkalan data, fungsi, store procedural, table atau view.
• Menjelaskaskan tentang pengguna pangkalan data yang akan diberikan hak akses terhadap pangkalan data.

Option CASCADE ialah untuk menarik balik hak akses tertentu dari pengguna yang diberikan hak akses.

Contohnya, jika kita ingin melakukan REVOKE pada hak akses yang sebelumnya:

REVOKE SELECT

ON SEKOLAH.PELAJAR

FROM liyana

Switchboard dalam Ms Access

Switchboard adalah suatu alat yang membolehkan anda melayari dalam pangkalan data. Ia menyediakan anda satu paparan (UI) dengan button (butang) yang boleh diklik untuk membuka borang, report, queries dan lain-lain aplikasi dalam MS Access.

Langkah-langkah untuk membuat Switchboard :

1. Klik pada ‘switchboard manager’ yang terdapat pada ribbon ‘create’ dan akan muncul box switchboard manager begini.
   
2. Setelah itu, klik pada ‘edit’ untuk menukar nama ‘switchboard’ anda dan setelah siap klik pada ‘close’.
   
3. Dan  ia akan menjadi begini (anda boleh ke ‘design view’ jika ingin mencantikkan lagi switchboard anda.)
   
4. Untuk mengedit switchboard anda, pergi ke ‘create’ dan sekali lagi klik pada ‘switchboard manager’. Setelah itu, ia akan menjadi begini
   
   
   
   
5. Klik pada ‘new’ untuk menambah page/halaman switchboard yang baru. Contohnya, form. Dan klik ‘ok’.
6. Untuk menambah item pada page default (liyanah perfume shop) anda perlu klik pada ‘edit’ dan setelah keluar seperti di bawah, anda klik pada ‘new’ dan apabila keluar box ‘edit switchboard item’ anda harus namakan item anda seperti ‘pergi ke form’. Commandnya ialah ‘go to switchboard’ kerana ia akan muncul di laman utama switchboard default. Dan setelah itu klik ‘ok’.
   
   
   
7. Dan ia akan keluar begini 
   
8. Untuk meletakkan item di bawah ‘form’ anda harus klik pada ‘edit'.
   
9. Dan ia akan keluar begini. Namakan item form anda. Contohnya, pelanggan. Commadnya ialah ‘open form in edit mode’, ini agar form terus terbuka jika kita klik pada ‘pelanggan’ nanti. Dan akhir sekali adalah memilih form yang akan digunapakai. Setelah siap klik ‘ok’. Jika anda mahu menambah lagi item pada form ini anda boleh klik lagi sekali pada ‘new’ dan ulangi langkah-langkah tadi.
   
   
    
   
10. Dan ia akan menjadi begini apabila anda klik pada ‘pergi ke form’ dan apabila anda klik pada ‘pembelian’ ia akan keluar begini 
     
    
11. Anda juga boleh menambah ‘back’ untuk kembali semula ke laman utama switchboard anda.
12. Klik saja pada ‘new’ untuk menjadikan back sebagai item di page ‘form’ 
    
13. Dan ia akan menjadi begini 
    
14.  Jika anda klik pada ‘back’. Secara automatik ia akan terus ke halaman utama switchboard default anda iaitu 
    

HYPER TEXT MARKUP LANGUAGE (HTML)

HTML ialah singkatan dari Hyper Text markup Language yang merupakan file teks atau file ASCII yang mengandungi arahan/script kepada web browser untuk menampilkan suatu tampilan grafik dari sebuah laman web.

HTML ini lebih mudah ditakrifkan sebagai bahasa tanda yang digunakan untuk membuat laman web. Ianya lebih kepada bahasa yang menetapkan corak paparan sesebuah dokumen yang akan diterjemah oleh pelayar web (web browser).

Sejarah 

HTML dicipta ole Tim Berners-Lee ketika masih bekerja untuk CERN dan HTML ini pertama kali dipopularkan oleh browser Mosaic. Era awal 1990, HTML telah berkembang pesat dan setiap pengembangannya pasti akan ada penambahbaikan pada kemampuan dan kemudahan yang lebih baik dari versi sebelumnya. Perkembangan HTML ini menyebabkan browser juga turut menaiktaraf diri supaya boleh menyokong kod – kod HTML yang baharu.

Fungsi

• Mencipta, mereka, mengawal paparan dari webpage dan kandungannya.
• Memaparkan dokumen secara atas talian sehingga boleh diakses dan dilihat dari seluruh dunia.
• Mencipta borang online yang boleh digunakan untuk menguruskan pendaftaran dan transaksi secara atas talian.
• Menambah objek – objek seperti imej, audio, video dan juga Java dalam document HTML.

Tanda – tanda / simbol – simbol umum yang digunakan dalam HTML

• Tag:   <tag>     contoh: <body>
• Element: <tag>……………</tag>     contoh:  <title>TAJUK</title>
• Atribut:  <tag attribute=”…..”>………………</tag>   contoh:   <div id=”html”>Apa itu HTML? </div>

Tag Asas HTML

  Ø  <html> - merupakan tag utama untuk halaman HTML.

  Ø  <head> - semua elemen head diletakkan di tag ini.

  Ø  <title> - menampilkan tajuk halaman.

  Ø  <body> - kandungan halaman. Apa – apa sahaja yang ditulis di body akan dipaparkan pada halaman HTML.

CASCADING STYLE SHEETS (CSS)

CSS merupakan kumpulan perintah yang direka dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi masalah style. CSS salah satu bahasa pengaturcaraan web yang mengatur komponen dalam laman web supaya laman lebih berstruktur dan seragam. CSS secara amnya mengatur warna body teks, ukuran, border, warna jadual dan hyperlink, margin, padding, paragraph spacing dan banyak lagi. Format V ini dapat menampilkan halaman yang sama dengan format yang berbeza

Sejarah CSS

CSS pertama kali bermula pada tahun 1970 – an sejak kemunculan SGML. Sejak itu, CSS mengalami perkembangan yang sangat pesat. CSS adalah hasil cetusan idea seorang programmer yang bernama Hakon Wium Lie semasa cadangannya mengenai Cascading HTML Style Sheet (CHSS) pada Oktober 1994 dalam konferensi W3C di Chicago). Kemudian, Lie bersama Bert Bos mengembangkan standard V. Pada tahun 1996, SCC rasmi telah dikeluarkan. Projek ini turut disokong oleh seorang programmer iaitu Thomas Reardon dari Microsoft. Nama dicetuskan melalui fakta style yang berbeza dapat diletakkan secara berurutan, dan mampumembentuk hubungan parent – child pada setiap style. CSS turut menjadi sebuah teknologi internet yang dipilih oleh World Wide Web Consortium atau W3C pada tahun 1996. Selepas itu, CSS dipiawaikan untuk kegunaan browser. Internet Explorer dan Netscape mengeluarkan browser terbaru mereka yang hamper sama mencapai standard CSS.

Sifat CSS

•         Internal – Memasukkan skrip CSS secara langsung ke dalam laman web.

•        External – Skrip CSS dipisahkan dan diletakkan dalam fail khusus. CSS akan dipautkan menuju ke ke fail HTML melalui tag – tag pada head.

Cara Penulisan CSS

•  Inline Style Sheet
•  Embedded Style Sheet

Tanda atau simbol CSS 

body {

    background:lightcyan;

   }

Tanda {} dinamakan selector, teks yang diapit oleh {} dinamakan declaration yang terdiri dari 2 unsur iaitu property dan value. Selector dalam penyataan diatas adalah ‘body’, ‘background’ adalah property dan ‘lightcyan’ adalah value

Inline style sheet ini boleh ditulis dengan menambah style=”...” dalam tag HTML. Style hanya berlaku pada tag yang bersangkutan sahaja. Bukan pada keseluruhan laman. Contohnya;

<p style=”color:red ; font-size:20px ;”> Tag P adalah untuk paragraph. Tag ini berwarna merah dan font sebesar 20px </p>

Cara penulisan Embedded Style Sheet adalah dalam tag seperti berikut <style>... </style> diatas <body>.Contohnya;

<style>

Body {

Background:lightblue ;

Font-family:century gothic ;}

H1{

Font-size:200% ;

Color:snow ;}

</style>

<body>

<h1>Tajuk ini berukuran standard H1 dan berwarna putih salji</h1>

</body>

Kelebihan CSS

•  Mengemaskini tampilan lebih mudah.
•   Beban bandwith yang lebih kecil.
• Memisahkan gaya rekaan dengan kandungan halaman web
• Modifikasi web template yang lebih mudah
•   Lebih mudah digunakan pada peranti mudah alih seperti smartphone
• Menyusun reka bentuk dengan efisyen
• Satu fail CSS yang boleh digunakan oleh banyak halaman
•  Mudah dimuat turun atau di muat naik keran ukuran fail yang kecil

Kekurangan CSS

• Paparan pada setiap browser berbeza
• Terdapat browser yang tidak dapat menyokong CSS contohnya browser lama
• Perlu tahu cara menggunakannya
• Memerlukan waktu yang lama untuk membuat dan menyusun tag CSS
• Tiada lagi bug / error dalam CSS

DATA DEFINITION LANGUAGE (DDL)

DDL merupakan salah satu perintah SQL yang digunakan untuk membangunkan kerangka pangkalan data.

4 Jenis Perintah DDL

   1.       CREATE

• CREATE digunakan untuk mencipta pangkalan data baharu, view baharu, column baharu dan lain – lain. Cara mencipta jadual dalam pangkalan data ialah;

CREATE TABLE Jadual_Pelajar(

No.Kad_Matrik varchar(10) default NULL,

Nama_Pelajar varchar(8) default NULL,

Jantina varchar(1) default NULL,

PRIMARY KEY (No.Kad_Matrik)

   2.       ALTER & RENAME

• ALTER digunakan untuk mengubah struktur suatu objek dalam pangkalan data. Cara menulis sintak ALTER ialah;

Alter table Jadual_Pelajar add Alamat varchar(25);

   3.       DROP

• DROP digunakan untuk menghapuskan objek dalam pangkalan data. Cara menulis sintak arahan untuk DROP ialah;

Drop table Jadual_Pelajar;

Contoh peritah DDL yang digunakan pada SQL

• CREATE
• CREATE DATABASE
• CREATE FUNCTION
• CREATE INDEX
• CREATE PROCEDURE
• CREATE TABLE
• CREATE TRIGGER
• CREATE VIEW

•  ALTER & RENAME
• ALTER DATABASE
• ALTER  FUNCTION
• ALTER  PROCEDURE
• ALTER  TABLE
• ALTER  VIEW

• DROP
• DROP DATABASE
• DROP FUNCTION
• DROP INDEX
• DROP PROCEDURE
• DROP TABLE
• DROP TRIGGER
• DROP VIEW