e-portfolio SKM

CE

7. Menggunakan tulisan open sans bersaiz 12 kerana jenis tulis
8. Cara mengubah warna rectangle ialah:

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

MEMBUAT LAKARAN ANTARA MUKA BAGI MENU ABO

ABOUT US

Cuci tech is a company set up in 2019. T
group is to solve problems from custom
websites, applications and software, ther
provided by cuci tech to facilitate and
group. On march 4,2019 cuci Tech re
developed a website service reserva
Laundry Company.

BACK TO HOME

LANGKAH-LANGKAH
5. Membuat lakaran menggunakan Microsoft office word
6. Membuat bentuk rectangle
- Klik insert →rectangle
7. Menggunakan tulisan open sans bersaiz 12 kerana jenis t
8. Cara mengubah warna rectangle ialah:

san ini lebih mudah untuk dibaca oleh pengguna

OUT US

The function of this
mers to developing
re are many options
interest customers
eceived a booking
ation for Al-Hijrah

tulisan ini lebih mudah untuk dibaca oleh pengguna

- Klik pada rectangle→ drawing tool→ shape fill→ black
MEMBUAT LAKARAN ANTARA MUKA BAGI MENU CON

BACK TO HOME
LANGKAH-LANGKAH

5. Membuat lakaran menggunakan Microsoft office wo
6. Membuat bentuk rectangle

NTACT US
ord

- Klik insert →rectangle
7. Menggunakan tulisan open sans bersaiz 12 kerana je
8. Cara mengubah warna rectangle ialah:
- Klik pada rectangle→ drawing tool→ shape fill→ black

MEMBUAT LAKARAN ANTARA MUKA BAGI MENU ORD
ORDER YOUR LAUNDRY
YOUR NAME
YOUR EMAIL

PHONE

ADDRESS
PICK UP
WASH AND FOLD

SUBMIT

enis tulisan ini lebih mudah untuk dibaca oleh pengguna

DER FORM
x

LANGKAH-LANGKAH:

6. Membuat lakaran menggunakan Microsoft office wo
7. Membuat bentuk rectangle

- Klik insert →rectangle
8. Menggunakan tulisan open sans bersaiz 12 kerana je
9. Cara mengubah warna rectangle ialah:
- Klik pada rectangle→ drawing tool→ shape fill→white
10. Membuat rectangle untuk checkbox.

MEMBUAT LAKARAN ANTARA MUKA BUTANG NAVIGA

SUBMIT BACK TO

LANGKAH-LANGKAH:

3. Membuat lakaran menggunakan Microsoft office wo
4. Membuat bentuk rectangle

- Klik insert →rectangle

ord
enis tulisan ini lebih mudah untuk dibaca oleh pengguna

ASI

O HOME X

ord

MEMBUAT CODING HTML UNTUK LOGIN PAGE (ADMIN
1. Buka perisian xampp. Klik Start pada menu Apache dan My

2. Kemudian buka perisian Adobe Dreamweaver CS6.

N)
y SQL.

3. klik menu PHP.
4. Aturcara untuk antaramuka login page menggunakan aturca

ara HTML

5. Output selepas
antaramuka login page.

memasukkan aturcara bagi

6. 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>

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

ka login page

</h1></Center>
gn="center">

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

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

9. 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"/>

10. Aturcara membuat isi tempat kosong bagi Username dan Pa

assword di dalam antara muka login page

<form method="POST" action="#">

<div class="form_input">

<label>Username : </label><input type
name="username" placeholder="Ente
Name"/><br /><br />

</div>

<div class="form_input">

<label> Password : </label><input type
name="password" placeholder="Enter
Password"/><br/><br />

</div>

<input type="submit" name="submit"
class="btn-login"/>

</form>

</div>

e="text"
er Your User

e="password"
r Your

" value="LOGIN"

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

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

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

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

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

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

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

PHP MyAdmin

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

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

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

5. Memberi nama kepada database bagi admin login iaitu demo
6. Memberi nama kepada table di dalam database demo iaitu loginf

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

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

8. 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

9. Kemudian, buka perisian adobe dreamwaver cs6
10. Klik menu PHP



11. Masukkan aturcara untuk disambungkan kepada database.
12. Masukkan aturcara config.php. Fail ini akan menyambungkan kep

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

1. Buka perisian xampp. Klik Start pada menu Apache dan My
2. Kemudian buka perisian Adobe Dreamweaver CS6.

y SQL.

3. klik menu PHP.



4. Aturcara untuk antaramuka sign up page menggunakan atur

rcara HTML

5. Sign up page telah pun siap.



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

2. Kemudian buka perisian Adobe Dreamweaver CS6.

NAKAN PHP MyAdmin DAN XAMPP (SIGN UP)
QL.

3. klik menu PHP.
4. Menggunakan database login user yang telah dibuat pada user lo