e-portfolio SKM

N)
y SQL.

15. klik menu PHP.
16. Aturcara untuk antaramuka login page menggunakan aturca

ara HTML

17. Output selepas memasukkan aturcara bagi antaramuka login

18. Aturcara bagi tajuk “ ADMIN LOGIN” di dalam antara muk
<div class="container text-center">
<Center><h1> ADMIN LOGIN <
<div style = "margin:30px" alig
<div class="container">
</div>

n page.

ka login page
</h1></Center>
gn="center">

19. Untuk memasukkan gambar di dalam antara muka login pag
namakan fail gambar tersebut sebagai admin.png di dalam f
format PHP.

ge, Muat turun gambar dari laman web google kemudian simpan dan
folder htdocs bersama dengan aturcara yang telah di simpan sebagai

20. Aturcara bagi memasukkan gambar di dalam antara muka lo
<img src="ad

21. Aturcara membuat butang Login di dalam antara muka login
<input type="submit" name
class="btn

ogin page
dmin.png"/>

n page
e="submit" value="LOGIN"
n-login"/>

22. Aturcara membuat isi tempat kosong bagi Username dan Pa

<form method="POST"
<div class="form_input"
<label>Username : </lab
name="username" plac
Name"/><br /><br />
</div>
<div class="form_input"
<label> Password : </lab
name="password" place
Password"/><br/><br />
</div>
<input type="submit" na
class="btn-login"/>
</form>
</div>

assword di dalam antara muka login page

action="#">
">
bel><input type="text"
ceholder="Enter Your User

">
bel><input type="password"
eholder="Enter Your
>

name="submit" value="LOGIN"

23. Untuk paparan di dalam localhost, pastikan file PHP dan gam
htdocs

mbar diletakkan di dalam fail htdocs. Klik local disc C →xampp →

24. Antaramuka login page telah pun siap. Klik link ini di dalam

m laman sensawang google : http://localhost/login.php

MEMBUAT SAMBUNGAN KEPADA DATABASE MENGGUN
13. Buka perisian xampp. Klik Start pada menu Apache dan My

14. Kemudian, klik pada butang admin untuk disambungkan kepada P

NAKAN PHP MyAdmin DAN XAMPP (ADMIN LOGIN)
y SQL.

PHP MyAdmin

15. Pergi ke Paparan PHP MyAdmin atau klik
0:index.php?db=&table=&server=1&target=&token=4e28d197ca

16. Untuk membuat nama bagi database yang baru, klik menu New

k pada link ini: http://localhost/phpmyadmin/#PMAURL-
a8ee3588bc2d212d00e3a4b

17. Memberi nama kepada database bagi admin login iaitu demo
18. Memberi nama kepada table di dalam database demo iaitu loginf

form dan menetapkan Number of Columns kepada 3. Kemudian klik Go.

19. Menetapkan data type bagi ID sebagai INT, length/value = 11, Ind
username sebagai varchar, length/value=50 dan data type bagi pas

20. Kemudian klik pada menu insert dan menetapkan column usernam

dex = Primary dan A/I (auto increment). Manakala bagi data type bagi
ssword ialah varchar, length/value=50 dan klik save.

me= admin dan column password=admin

21. Kemudian, buka perisian adobe dreamwaver cs6
22. Klik menu PHP



23. Masukkan aturcara untuk disambungkan kepada database.
24. Masukkan aturcara config.php. Fail ini akan menyambungkan kep

pada database yang telah kita buat. Admin login telah pun siap.

MEMBUAT CODING HTML UNTUK SIGN UP PAGE (USER
6. Buka perisian xampp. Klik Start pada menu Apache dan My

7. Kemudian buka perisian Adobe Dreamweaver CS6.

R)
y SQL.

8. klik menu PHP.
9. Aturcara untuk antaramuka sign up page menggunakan atur

rcara HTML

10. Sign up page telah pun siap.



MEMBUAT SAMBUNGAN KEPADA DATABASE MENGGUN
1. Buka perisian xampp. Klik Start pada menu Apache dan My

2. Kemudian buka perisian Adobe Dreamweaver CS6.

NAKAN PHP MyAdmin DAN XAMPP (SIGN UP)
y SQL.

3. klik menu PHP.
4. Menggunakan database loginuser yang telah dibuat pada use

er login page

5. Penyambungan kepada database telah pun Berjaya



CARTA GANTT STUDIO MULTIMEDIA
PEMBANGUNAN LAMAN

Perkara / Minggu PENGURUS
123
Membuat Carta Gantt mengikut jawatan sebagai
pengurus kreatif
Mencari sumber rujukan dan bahan serta tutorial
dalam pembangunan laman web
Mereka dan menentukan paparan antaramuka
pembangunan laman web
Mereka butang-butang yang hendak digunakan
dalam dalam pembangunan laman web
Mereka paparan login admin dan sign up page

Membuat sambungan kepada database untuk
admin login dan sign up page

Memastikan ciri-dan jenis interaktif besesuaian
dengan kehendak pengguna
Memastikan butang atau hypermedia untuk
kegunaan pengguna (navigasi) befungsi dengan
baik.
Membuat penilaian dan pengujian terhadap
aplikasi yang dibangunkan.
Menganalisa maklum balas pengguna terhadap
aplikasi yang dibangunkan
Menyediakan pelaporan akhir

Pembentangan projek

A II MINGGU 1 HINGGA MINGGU 14
N WEB DOBI AL-HIJRAH

S KREATIF
4 5 6 7 8 9 10 11 12 13 14

LAPORAN TESTING ANALISIS (BAHAGIAN 1)
Nama: Syasya Nabihah Binti Mohd Nazi
Jawatan: Pengurus Kreatif
No matrik: CB160141

MEMBUAT PEMBAHARUAN TERHADAP LOGO DI DALA

Langkah-langkah:
1. Menggunakan Adobe Illustrato
2. Menggunakan rounded rectang
3. Seterusnya, menggunakan ecli
4. Meletakkan warna hitam pada
5. Menggunakan warna putih unt

AM LAMAN WEB

or CC.
gle tool untuk membuat segi empat.
ipse tool untuk membuat 2 bulatan kecil dan besar.
a segi empat.
tuk setiap bulatan yang berada di dalam segi empat.

MEMBUAT LAKARAN ANTARA MUKA LAMAN WEB (PIL

ONTY’S LAUNDRY HOW TO ORDER

LANGKAH-LANGKAH

1. Membuat lakaran antara muka laman web menggunakan Mi
2. Klik pada button insert→shapes. Pilih bentuk rectangle
3. Menggunakan gambar yang bersesuaian dengan laman web
4. Cara memasukkan gambar ialah :

- Klik insert button-→ pictures

LIHAN 1) ABOUT US CONTACT US
PRICE

icrosoft office word
yang dibangunkan

5. Pilih gambar yang telah dimuat turun dan klik insert.



LAKARAN ANTARA MUKA UNTUK MENU HOW TO ORD

ONTY’S LAUNDRY HOW TO ORDE

HOW TO ORDER

LANGKAH-LANGKAH

1. Membuat lakaran antara muka laman web menggunakan Mi
2. Klik pada button insert→shapes. Pilih bentuk rectangle
3. Menggunakan warna kelabu. Cara tukar color dalam bentuk

- Klik pada bentuk rectangle →drawing tool→ shape fill→

DER PRICE ABOUT US CONTACT US
ER

icrosoft office word

rectangle adalah:
→ grey color

LAKARAN ANTARA MUKA UNTUK MENU PRICE

ONTY’S LAUNDRY HOW TO ORDER

PRICE

LANGKAH-LANGKAH

1. Membuat lakaran antara muka laman web menggunakan Mi
2. Klik pada button insert→shapes. Pilih bentuk rectangle
3. Menggunakan warna kelabu. Cara tukar color dalam bentuk