Minggu 1 (30/11/2015-3/12/2015)
- Melaporkan diri di Mesra Web.
- Sesi pengenalan bersama staf dan pelajar praktikal di Pejabat Daerah. - See more at: http://latihanindustri15.blogspot.my/2015/02/minggu1-minggu5.html#sthash.z5GQNiGB.dpufSesi pengenalan bersama staf dan pelajar praktikal di pejabat.
- Membuat sistem php.
- Mereka Database baru
Apabila telah daftar masuk pada php phpmyadmin, hanya perlu menaip nama pangkalan data dan tekan butang “create”.
“Create database” di phpMyAdmin
Langkah yang seterusnya, untuk membina table, klik kepada tab “Databases” dan pilih nama pangkalan data yang telah dibina.
Seterusnya,klik pada pangkalan data dan muncul kotak “create table” di dalam pangkalan data tersebut lalu mengisi kotak “name” dengan nama table yang dimahukan serta bilangan attribute yang digunakan didalam “number of columns” dan klik butang “Go”.
(membuat table)
Selepas itu, namakan setiap ruangan dan tetapkan jenis data dalam table yang telah dibina, seperti contoh SQL dibawah.
(Senarai nama attribute di dalam table)
Menetapkan panjang data jika jenis data string contohnya VARCHAR ,CHAR.Akhir sekali,klik butang “Save” dan memasukkan data-data contoh ke dalam table dengan menekan butang Insert seperti berikut:
Seterusnya masukkan data seperti berikut dan tekan butang ‘Go”:
Selepas itu,untuk melihat data yang telah diisi perlulah tekan butang ‘Browse’
Data yang telah diisi akan dapat dilihat seperti berikut didalam table.
MENGUJI BORANG DAN PANGKALAN DATA
Langkah 1:membina skrip konfigurasi dan simpan fail sebagai dbconn.php
Langkah 2: membina skrip untuk borang dan simpan fail sebagai borang.php seperti berikut
Jadual ditakrifkan dengan
tag.Jadual dibahagikan kepada baris meja dengan tag.Baris jadual dibahagikan kepada data jadual dengan
| tag.Baris jadual juga boleh dibahagikan kepada tajuk jadual dengan | tag. |
|---|
Output:
• include (atau memerlukan) penyata yang mengambil semua teks / kod / markup yang wujud di dalam fail yang dinyatakan dan salinan ke dalam fail yang menggunakan kenyataan include.
• session adalah satu cara untuk menyimpan maklumat (dalam pembolehubah) yang akan digunakan di beberapa halaman. Session dimulakan dengan fungsi session_start ().
Langkah 4: Mengisi borang dan tekan daftar.
Apabila menekan “Daftar” data yang telah
diisi akan dihantar ke pangkalan data.
MEMBUAT CARIAN UNTUK MAKLUMAT YANG TELAH DIISI DAN MEMAPARKANNYA
- “Search” merupakan sebuah enjin carian berasaskan web yang membolehkan pengguna sistem tersebut mencari maklumat di dalam sistem tersebut.
- Untuk penggunaan “search” boleh berdasarkan nama, nombor id, email atau lain-lain data/maklumat.
Langkah 1: membina skrip search.php.
- Bina satu fail baru “search.php” yang merupakan laman di mana pengguna membuat carian.
- Untuk carian pengguna mesti meletakkan nama pengguna yang telah daftar ke dalam akuan sistem tersebut.
- Jika pengguna meletakkan nama yang salah atau nama yang tidak berdaftar, carian tersebut tidak berjaya.
- Butang “Carian” akan menghantar carian tersebut ke fail searchN.php di mana fail search.php akan link ke pangkalan data.
- Butang“reset” akan menetapkan semula carian.
Output:
Langkah 2: membina skrip untuk mendapatkan data dan memaparkan data yang dicari dari pangkalan data dan simpan fail sebagai searchN.php
Output:
Pada search.php ada taip data nama yang dicari seperti berikut:
Memahami apa itu responsive
APA itu Responsive website ?
Ia adalah laman web yang pintar dimana ia boleh mengesan pelawat anda sama ada menggunakan PC, tablet atau telefon pintar semasa mengakses website tersebut. Ia akan berubah mengikut device yang digunakan. Pelawat laman web anda tidak akan lagi susah untuk melayari laman web anda di telefon pintar. Secara ringkasnya anda mempunyai laman web yang mesra telefon. Untuk melihat sama ada website itu responsive ataupun tidak, anda boleh buka website anda menggunakan software firefox dan melakukan seperti langkah dibawah:
Langkah 1: klik bar menu
Hasil daripada website yang tidak responsive
MEMBINA DOKUMEN HTML
Saya mulakan laman web itu dengan DOCTYPE HTML dan unsur-unsur meta standard . Tetapi untuk mendapatkan susun atur ini responsif kita perlu persediaan beberapa komponen tambahan. Kebanyakan adalah tag meta biasa dan akan disokong dalam semua pelayar moden.
Tag meta viewport adalah penting untuk mendapatkan teknik yang responsif untuk berkerja pada telefon pintar. Kami menetapkan skala itu kepada 1:0 supaya susun atur dipaparkan pixel sempurna. Anda juga boleh melihat saya telah memasukkan ke sebuah lembaran gaya luar dari Google Web Font. Saya menggunakan typefaces " Sans serif". Fon unik pasti menarik perhatian pengunjung.
BLOK KANDUNGAN UTAMA
Seluruh dokumen diletakkan di dalam div dan banyak bahagian blok di dalam bahagian < header > tag termasuk gambar , home, product, company, contact dan metadata penting yang lain.
Di bawah adalah contoh output dan code bagi bahagian header:
Output responsive yang telah dipapar berdasarkan code di atas:
SKRIP RESPONSIVE UNTUK COLUMN
Struktur HTML
Sebelum saya menulis tentang code CSS, saya ingin menunjukkan versi yang dipermudahkan HTML yang dipaparkan
Saya melinkkkan dengan singleColumn.css pada head HTML:
CSS Reset
Kita tidak perlu banyak untuk reset apa yang kita lakukan di sini. Kita hanya perlu untuk menetapkan semua unsur-unsur untuk menggunakan " border-box " box model , buangkan top margin dari semua elemen, dan membuang semua margin/padding dari beberapa elemen tertentu.
Single Column CSS Layout
Mengikut falsafah pembangunan pertama mudah alih , kami akan bermula dengan gaya mudah alih dan kemudian menambah gaya untuk tablet dan kemudian gaya desktop penuh menggunakan media queries. Sebenarnya , kami hanya akan mula berbuat demikian apabila kita menambah lebih banyak ruang untuk susun atur kami. Untuk susun atur single column kita tidak perlukan media queries. Kami hanya menggunakan fluid width layout yang akan mengambil kira semua peranti. Pertama, mari kita menambah sedikit warna supaya kita dapat membezakan di antara div #header , #main dan #footer.
Sekarang kita dapat melihat apa yang kita sudah lakukan dengannya, kami akan menubuhkan struktur.
Berikut adalah bagaimana ia
berfungsi. The divs .wrap mendapatkan max- lebar 1200px sebagainya benar-benar
besar skrin mereka tidak mendapat terlalu tersebar. Pada mana-mana peranti yang
lebih kecil daripada 1200px lebar, divs .wrap hanya akan mengisi seluruh lebar
skrin. Menetapkan margin untuk "0 auto" meyakinkan kita bahawa tidak
akan ada margin atas atau di bawah divs , tetapi jika skrin adalah lebih luas
daripada 1200px , margin mendatar akan sama , yang akan tertumpu div . Akhirnya
kita menambah padding 1em kepada divs , jadi tiada kandungan akan menyentuh
bahagian tepi skrin pada peranti kecil. Berikut adalah apa yang ia perlu
kelihatan seperti di telefon bimbit.
2nd Column
Saya melinkkkan dengan 2Column.css pada head HTML:
Struktur diterangkan secara detail pada single column layout di atas, jadi saya teruskan dengan code CSS.
CSS Reset
Saya menggunakan CSS Reset daripada single column layout yang sama.
Single Column Layout untuk telefon mudah alih
Saya mulakan dengan satu column untuk susun atur telefon mudah alih dengan kandungan column dimulakan dahulu dan bar sisi dibawahnya. Sebelum kita melakukannya, mari kita tambah beberapa warna untuk kita membezakan elemen-elemen tersebut.
Sama seperti susun atur single column, #header adalah kelabu dan seksyen #main yang lebih kepada kelabu cerah. Namun, kali ini saya telah menambah sempadan sekitar div #secondary yang memegang bar sisi. Sekarang mari kita beralih kepada struktur yang sebenar.
Bermula pada awal, div .wrap mempunyai lebar maksimum 1140px dan tertumpu kepada peranti yang lebih besar dengan menetapkan margin untuk "0 auto". Padding adalah untuk menyimpan teks dari menyentuh sempadan pelayar pada skrin yang lebih kecil.
Code di .wrap selepas section adalah untuk memastikan setiap div .wrap semua dipaparkan unsur-unsur di dalamnya, bukannya membiarkan unsur-unsur dipaparkan bertindih di tepi.
Bahagian #primary menetapkan lebar maksimum bagi column kandungan utama. Kami tidak mahu column kandungan mendapat ruangan yang benar-benar luas kerana ruangan luas adalah lebih sukar untuk dibaca. Di sini kita mengehadkan ruang ini kepada 720px dan berpusat dengan menggunakan "margin: 0 auto;" apabila skrin adalah lebih besar daripada 720px.
Bahagian #secondary menghadkan lebar bar sisi untuk 400px. Kandungan Sidebar jarang bertujuan untuk dipaparkan dalam kawasan yang luas. Oleh disebabkan sidebar tidak akan lebih luas daripada 400px dalam dua lajur penuh, saya juga mengehadkannya. Dengan cara ini sidebar akan muncul dalam cara yang konsisten tanpa mengira saiz skrin. Sama seperti unsur-unsur lain, saya memusatkannya menggunakan "margin: 0 auto" dan kemudian memberikan padding daripada 1em supaya kandungan tidak menyentuh sempadan yang kita berikan sebelum ini. Berikut adalah apa yang ia perlu kelihatan seperti di telefon bimbit.
Dua Column Layout CSS
Berikut adalah di mana kami akhirnya dapat menggunakan pertanyaan media CSS. Ini adalah apa yang kelihatan seperti :
Garisan ini ditentukan
apabila penutupan CSS digunakan. Dalam kes ini, ia digunakan apabila laman web sedang
memaparkan pada skrin yang mempunyai lebar 900px atau lebih.
Bahagian #primary dipaparkan
ke kiri dan diberi lebar sebanyak 65%. Kemudian 1em padding ditambah di sebelah
kanan untuk menghalang kandungan yang disertakan dari menyentuh bar sisi yang
akan diletakkan di sebelah kanan kandungan utama.
Bahagian #secondary dipaparkan
ke kanan dan diberi lebar sebanyak 35% , supaya ia duduk di sebelah bahagian
yang #primary.
Sebenarnya code CSS boleh digunakan bukan hanya untuk mengatur jumlah column,
namun boleh melakukan perubahan-perubahan lain seperti merubah column menjadi
berwarna, merubah ukuran font, warna font, dll.
3rd Column
Saya akan menunjukkan bagaimana untuk mengendalikan tiga column susun atur apabila kedua-dua sidebar berada di bahagian yang sama. Sidebars berpecah keluar pada setiap bahagian kandungan utama dibincangkan dalam tutorial seterusnya.
Jika anda sudah membaca post pada dua column susun atur, anda akan melihat bahawa satu-satunya penambahan itu ialah div #tertiary.
Saya akan menunjukkan bagaimana untuk mengendalikan tiga column susun atur apabila kedua-dua sidebar berada di bahagian yang sama. Sidebars berpecah keluar pada setiap bahagian kandungan utama dibincangkan dalam tutorial seterusnya.
Jika anda sudah membaca post pada dua column susun atur, anda akan melihat bahawa satu-satunya penambahan itu ialah div #tertiary.
CSS Reset
Saya akan menggunakan semula CSS yang sama seperti yang dijelaskan tutorial sebelumnya
Single Column Layout untuk Telefon Mudah Alih
#header dan #main div kini mempunyai warna latar belakang dan setiap div .widget dalam #secondary dan column #tertiary mempunyai border. Sekarang mari kita beralih kepada struktur yang sebenar.
Sekarang kita sedang berhadapan dengan tiga column, kita boleh mengeluarkan sedikit daripada apa yang kita lakukan dalam tutorial sebelumnya. Sebagai contoh, divs .wrap kini mempunyai max- lebar 1400px . Pada skrin yang lebih besar daripada 1400px , mereka berpusat kerana tetapan " auto" margin. #primary dan column #secondary masih berpusat kerana mereka berada di kedua-dua ruangan susun atur , tetapi kini column #tertiary telah ditambah. Setiap widget mempunyai padding untuk 1em untuk mengelakkan teks daripada menyentuh sempadan widget. Saya menambah dalam seksyen warna, dan margin - bawah 1em untuk mengelakkan widget dari menyentuh antara satu sama lain. Pada peranti mudah alih ia perlu kelihatan seperti ini
Dua Ruangan Layout untuk Telefon mudah alih
Sebagaimana skrin semakin lebar dan kita mencapai saiz tablet yang biasa , kita boleh mengubah bar sisi atas dari bahagian bawah halaman tersebut ke sebelah kanan halaman . Halaman itu tidak cukup luas lagi bagi sidebar untuk duduk sebelah- menyebelah, jadi mereka disusun satu di atas manakala yang lain seterusnya untuk #primary div kandungan halaman.
Column kandungan #primary dipaparkan di kiri dan
padding-right disetkan 1em untuk memastikan bahawa kandungan halaman tidak
menyentuh bar sisi. #secondary dan column #tertiary kedua-duanya dipaparkan ke
kanan dan jelas ditetapkan untuk " right" untuk memaksa mereka memaparkan
satu demi satu dengan cara yang menegak. Ia sepatutnya kelihatan seperti ini:
Tiga Column Layout CSS.
Akhir sekali, bagi mana-mana skrin yang lebarnya 1140px atau lebih , kita boleh memaparkan susun atur tiga lajur penuh.
Column #primary kini mempunyai lebar hanya 50% kerana susun atur telah menjadi begitu luas. Column #secondary dan column #tertiary kedua-duanya dipaparkan ke kiri dengan setiap lebar 25% supaya mereka boleh duduk bersebelahan antara satu sama lain dan bukannya disusun di atas satu sama lain. Perhatikan juga bahawa padding-right telah dikeluarkan dari ruang #primary dan padding kiri telah ditambah kepada column #secondary dan column #tertiary . Ini membolehkan bar sisi dari menyentuh antara satu sama lain disamping mempunyai ketetapan yang sama lebar . Ia harus kelihatan seperti ini:
Minggu 4 (20/12/2015-24/12/2015)
Borang dan carian mesra telefon
Membina Struktur Borang
Untuk memulakannya, saya telah membuat fail html iaitu register.html bersama dengan fail css iaitu register.css yang mengendalikan window size yang berbeza. DOCTYPE saya ialah HTML5 dan saya telah letakkan keseluruhan borang di dalam
.
Code ini mestilah diletakkan selepas dan sebelum
Code ini mestilah diletakkan selepas dan sebelum
Berdasarkan code di atas, borang ini akan kelihatan seperti di bawah
Perubahan Layout responsif
CSS saya seterusnya yang boleh kita lihat ialah media queries responsif yang mudah saya telah setup. Mana-mana window pelayar di atas 900px akan mengalami muka sidebar yang penuh. Seperti yang anda dapat di bawah anda akan melihat unsur-unsur sidebar jatuh ke bawah.
Seterusnya saya setkan kepada 600px untuk paparan skrin pada telefon
Output selepas linkkan register.html dan register.css menghasilkan borang yang responsive
Berikut adalah code untuk membuat search form responsive :
Code HTML:
Mestilah diletakkan di dalam
Output bagi borang carian yang responsive akan mengikut size skrin paparan telefon pintar.
Minggu 5 (27/12/2015-31/12/2015)
Di pelajaran ini, saya akan menunjukkan bagaimana cara untuk membuat gambar yang responsive seperti apa yang dilihat di bawah ini.
Imej ini akan mempunyai skala supaya lebarnya ialah 100% daripada container. Container itu bergantung kepada saiz viewport dan boleh mempunyai lebar maksimum 960px.
Terdapat banyak teknik imej responsif, dan mereka berbeza dalam tahap kerumitan dan tahap sokongan pelayar.
Contoh cara yang rumit melaksanakan imej responsif adalah dengan menggunakan attribute srcset , yang memerlukan banyak imej , lebih markup, dan pergantungan pada attribute HTML baru yang tidak mendapat sokongan di luar pelayar moden.
Sebaliknya, kaedah ini adalah mudah dan bergantung hanya pada lebar CSS dan sifat-sifat ketinggian, yang bermaksud kaedah yang boleh bekerja di hampir semua pelayar dan peranti. Bagaimanapun, ia akan memerlukan susun atur reka bentuk web ini susun atur yang responsif.
Asas imej responsif
Memulakan dengan contoh yang asas. Di mana div yang bertindak sebagai container bagi unsur
HTML
Container itu mempunyai lebar sebanyak 96 % supaya ia mempunyai left dan right margin. Ia mempunyai max width-960px supaya susun atur tidak terlalu luas di skrin besar.
Unsur
Elemen
Imej responsif dalam Column
Kadang-kadang kita mahu imej untuk dipaparkan sebelah- menyebelah dalam column. Sebagai contoh , galeri imej sering memaparkan imej kecil pada grid.
Untuk mencapai imej responsif dalam column, satu-satunya perubahan yang perlu kita lakukan adalah kurangkan width CSS dan memberikan elemen
Dua column Layout Imej Responsif
Untuk dua column susun atur imej responsif, kita boleh menetapkan width CSS untuk 48%, atau kira-kira setengah daripada container. Sebab ia tidak ditetapkan kepada 50% adalah untuk memberi margin imej di sisi mereka .
Tiga column Layout Imej Responsif
Untuk tiga column layout imej responsif, ia juga menggunakan konsep yang sama iaitu cuma perlu menetapkan width kira-kira 1/3 daripada width container: 32%.
Imej dengan breakpoints
Ia adalah cara yang baik untuk imej yang responsif dipaparkan dalam column supaya apabila imej mengecil, column akan ke bawah. Memerlukan media queries untuk membuat ianya berlaku. Dalam contoh berikut , imej akan dipaparkan dalam satu column pada telefon pintar, dua column pada tablet, dan empat column di skrin yang lebih besar.
Imej full-width responsif
Untuk mempunyai imej responsif yang sentiasa 100% daripada saiz viewport , kita hanya perlu mengeluarkan max-width container (960px) dan memberikan width 100%.
Di bawah adalah apa yang akan kelihatan pada desktop:
Di bawah adalah apa yang akan kelihatan pada telefon :
Memaparkan senarai profile seseorang yang responsif. Apa yang saya katakan adalah seperti contoh yang tertera di bawah ini:
Di atas adalah paparan pada desktop . Saya akan tunjukkan sebentar lagi paparan responsif di dalam telefon pintar. Antara code HTML bagi memaparkan senarai profile:
Code HTML yang pertama adalah di bahagian :
HTML:
Akhirnya mendapat paparan di telefon pintar seperti di bawah:
Teknik responsive memang bagus digunakan untuk membuat layout sebuah website kerana pada masa kini sudah banyak pengguna menggunakan telefon pintar atau android. Hal ini memudahkan kepada pengguna telefon pintar untuk melayari mana-mana laman web yang responsif. Namun begitu, penggunaan responsif harus disesuaikan dengan jenis websitenya sendiri sama ada ia sesuai apabila menggunakan teknik ini pada website tersebut.
