e-portfolio SKM

ogin page

5. Penyambungan kepada database telah pun Berjaya



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

TESTING DEVELOPMENT

1 Mereka Navigasi Ming

Lankah-langkah:
4) Menggunakan perisian Microsoft

word

5) Cara membuat navigasi ialah: Ming
- Insert→shape→ rectangle

6) Untuk mengubah warna di dalam

butang navigasi Ming

- Klik pada Rectangle→drawing

tool→fill color→green/blue

Ming

B

4 (SETELAH DITAMBAHBAIK)

RESULT REMARKS
DONE
ggu 2:
ORDER

LEARN MORE

ggu 3:
ORDER

ggu 4: GET STARTED
ORDER

SUBMIT
ggu 5:

ORDER

SUBMIT

BACK TO HOME

CLO

2 Membuat perubahan pada logo di dalam Ming
laman web

Langkah-langkah:
6. Menggunakan Adobe Illustrator Ming
CC.
7. Menggunakan rounded rectangle
tool untuk membuat segi empat.
8. Seterusnya, menggunakan eclipse
tool untuk membuat 2 bulatan kecil
dan besar.
9. Meletakkan warna hitam pada segi
empat.
10. Menggunakan warna putih untuk
setiap bulatan yang berada di dalam
segi empat.

OSE BUTTON DONE

X

ggu 1:

ggu 2-5:

3 Membuat perubahan pada antara muka Ming
laman web:

Minggu 1-2
LANGKAH-LANGKAH:

- Ditolak kerana penggunaan
peralatan untuk membangunkan
laman web tidak menepati syarat
studio multimedia 2

- Menggunakan Wordpress

Minggu 3-4
LANGKAH-LANGKAH:

- Membuat lakaran antara muka
laman web menggunakan
Microsoft office word

- Klik pada button insert→shapes. Ming
Pilih bentuk rectangle

- Menggunakan warna kelabu.
Cara tukar color dalam bentuk
rectangle adalah:

ggu 1-2 FAIL

ggu 3-4

FAIL

Klik pada bentuk rectangle
→drawing tool→ shape fill→
Pink color
- Cara memasukkan gambar ialah
:
Klik insert button-→ pictures
- Membuat lakaran menggunakan
Microsoft office word.
- Menggunakan rectangle untuk
mengisi tempat kosong
- Cara membuat rectangle ialah:
- Klik insert →rectangle
- Menggunakan map untuk
menunjukkan kedudukan kedai
bagi yang pertama kali ingin
datang ke kedai.
- Mengandungi alamat dan no
telefon.



Minggu 5: Ming

Langkah-langkah

LANGKAH-LANGKAH:
5. Membuat lakaran menggunakan
Microsoft office word
6. Isi kandungan muka hadapan laman
web menggunakan tulisan poppins
bersaiz 12.

7. Cara untuk mengubah warna tulisan
adalah :
- Highlight kesemua tulisan yang
ingin diubah warna
- klik pada bahagian jenis tulisan

8. Untuk membuat symbol (>) klik

pada papan kekunci

- Shift >

.

ggu 5:

SUCCESS





4 Lakar form

LANGKAH-LANGKAH:
16. Membuat lakaran menggunakan
Microsoft office word.
17. Menggunakan rectangle untuk
mengisi tempat kosong
18. Cara membuat rectangle ialah:
- Klik insert →rectangle
19. Menggunakan map untuk
menunjukkan kedudukan kedai bagi
yang pertama kali ingin datang ke
kedai.
20. Mengandungi alamat dan no telefon.

SUCCESS

5 Membuat Admin Page

SUCCESS

6 Membuat User Login Page

SUCCESS

7 Membuat sambungan kepada database
untuk admin login page

1. Buka perisian xampp. Klik Start

pada menu Apache dan My SQL.

2. Kemudian, klik pada butang admin
untuk disambungkan kepada PHP
MyAdmin

3. Pergi ke Paparan PHP MyAdmin atau
klik pada link ini:
http://localhost/phpmyadmin/#PMAU
RL-
0:index.php?db=&table=&server=1&t
arget=&token=4e28d197ca8ee3588bc2
d212d00e3a4b

4. Memberi nama kepada database bagi
admin login iaitu demo

5. Memberi nama kepada table di dalam

database demo iaitu loginform dan

menetapkan Number of Columns

kepada 3. Kemudian klik Go.

6. Menetapkan data type bagi ID sebagai
INT, length/value = 11, Index =
Primary dan A/I (auto increment).
Manakala bagi data type bagi
username sebagai varchar,
length/value=50 dan data type bagi
password ialah varchar,
length/value=50 dan klik save.

SUCCESS

7. klik pada menu insert dan menetapkan

column username= admin dan column

password=admin

8. klik pada menu insert dan menetapkan
column username= 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 kepada
database yang telah kita buat. Admin
login telah pun siap.



8 Membuat sambungan kepada database
untuk user login page

1. Buka perisian xampp. Klik Start

pada menu Apache dan My SQL.

2. Kemudian, klik pada butang admin
untuk disambungkan kepada PHP
MyAdmin

3. Pergi ke Paparan PHP MyAdmin atau
klik pada link ini:
http://localhost/phpmyadmin/#PMAU
RL-
0:index.php?db=&table=&server=1&t
arget=&token=4e28d197ca8ee3588bc2
d212d00e3a4b

4. Memberi nama kepada database bagi
admin login iaitu demo

5. Memberi nama kepada table di dalam

database demo iaitu userform dan

menetapkan Number of Columns

kepada 3. Kemudian klik Go.

6. Menetapkan data type bagi ID sebagai
INT, length/value = 11, Index =
Primary dan A/I (auto increment).
Manakala bagi data type bagi
username sebagai varchar,
length/value=50 dan data type bagi
password ialah varchar,
length/value=50 dan klik save

SUCCESS

7. klik pada menu insert dan menetapkan

column username= admin dan column

password=admin

8. klik pada menu insert dan menetapkan
column username= 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 kepada
database yang telah kita buat. User
login telah pun siap.



LAKARAN ANTARAMUKA PAPARAN LOGIN (ADMIN DA

Langkah-langkah:
1. Menggunakan adobe dreamweaver cs6
2. Masukkan aturcara HTML

<!DOCTYPE html>
<html>
<head><title>login form</title>
<link rel="stylesheet" a href="css3\style.css"/>
<link rel="stylesheet" a href="css3\font-awesome.min.css"/>

AN USER)

Langkah-langkah:
1. Menggunakan adobe dreamweaver cs6
2. Masukkan aturcara HTML

<!DOCTYPE html>
<html>
<head><title>login form</title>
<link rel="stylesheet" a href="css3\style.css"/>
<link rel="stylesheet" a href="css3\font-awesome.min.css"/>

</head>

<body>

<div class="container text-center">

<Center>

<h1> ADMIN LOGIN </h1></Center>

<div style = "margin:30px" align="center">

<div class="container">

</div>

<img src="admin.png"/>

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

<div class="form_input">

<label>Username : </label><input type="text"

name="username" placeholder="Enter Your User Name"/><br

/><br />

</div>

<div class="form_input">

<label> Password : </label><input type="password"

name="password" placeholder="Enter Your

Password"/><br/><br />

</div>

<input type="submit" name="submit" value="LOGIN"

class="btn-login"/>

</head>
<body>

<div class="container text-center">

<Center><h1> USER LOGIN </h1></Center>

<div style = "margin:30px" align="center">

<div class="container">

</div>

<img src="user.png"/>

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

<div class="form_input">

<label>Username : </label><input type="text"

name="username" placeholder="Enter Your User Name"/><br

/><br />

</div>

<div class="form_input">

<label> Password : </label><input type="password"

name="password" placeholder="Enter Your

Password"/><br/><br />

</div>

<input type="submit" name="submit" value="LOGIN"

class="btn-login"/>

</form>
</div>
</body>
</html>

PAPARAN ANTARAMUKA (ADMIN)

NAME MATRIC PHONE PICK

Langkah-langkah:

1. Klik butang insert→ pilih table
2. Menggunakan Microsoft office word

</form>
</div>
</body>
</html>

K UP DELIVERY SERVICES ADDRESS

PAPARAN ANTARA MUKA (USER)

Langkah-langkah:
1. Menggunakan adobe dreamweaver cs6
2. Masukkan aturcara HTML

<!DOCTYPE HTML>
<html lang="en">



<head>
<title>Onty Laundry</title>
<meta name="viewport" content="width=device-width, initial-sca
<meta charset="utf-8">
<meta name="keywords" content="Go Laundry Responsive web te
Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/cs
<!-- gallery css -->
<link rel="stylesheet" href="css/swipebox.css">
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />

ale=1">
emplate, Bootstrap Web Templates, Flat Web Templates, Android
a, Samsung, LG, SonyEricsson, Motorola web design" />

ss' />

<!-- font-awesome icons -->
<link href="css/fontawesome-all.min.css" rel="stylesheet">
<!-- //Custom Theme files -->
<!--webfonts-->
<link
href="//fonts.googleapis.com/css?family=Raleway:100,100i,200,2
900i" rel="stylesheet">
<!--//webfonts-->
</head>
<body>
<!-- header -->
<header>

<div class="container">
<nav class="navbar navbar-expand-lg navba
<button class="navbar-toggler

target="#navbarSupportedContent" aria-controls="navbarSupporte
aria-expanded="false" aria-label="
<span class="navbar-toggler-

</button>

<div class="collapse navbar-collapse
<ul class="navbar-nav mx-au

>
200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,

ar-light"> data-toggle="collapse" data-
ml-md-auto" type="button"
edContent"
"Toggle navigation">
-icon"></span>

e" id="navbarSupportedContent">
uto text-center">

<li class="nav-item a

</li>
</ul>
<button type="button" class
weight-bold" onclick="window.location.href='laman.html'">

HOME
</button>

</div>
</nav>
</div>
</header>
<!-- order modal -->
<div class="container" style="background-color: #C69">

<form method="post" enctyp
<h3 align="center">Order Form</h3>
</br>

<label for="na
<input type="

ctive mr-3">
s="btn btn-info btn-lg-block w3ls-btn px-4 text-uppercase font-

pe="multipart/form-data">
ame" class="col-form-label">Your Name</label>
"text" required name="name" id="name">

</br>
<label for="m
<input type="
</br>
<label for="ph
<input type="
</br>
<label for="pi
<input type="
</br>
<label for="de
<input type="
</br>

<input
value="Basic">Basic RM6<br/>

<input type="checkbox" id="service" name="s
<input type="checkbox" id="service" name="s
<input type="checkbox" id="service" name="s

</br>
<div class="fo
<label for="ad
<textarea class="form-control" ro

matrik"class="col-form-label">Your Matric Number</label>
"text" required name="matrik" id="matrik">

hone"class="col-form-label">Phone</label>
"text" required name="phone" id="phone">

ickup"class="col-form-label">Pick Up</label>
"date" required name="pickup" id="pickup" >

elivery"class="col-form-label">Delivery </label>
"date" required name="delivery" id="delivery">

t type="checkbox" id="service" name="service[]"

service[]" value="Regular">Regular RM8<br/>
service[]" value="Dry Cleaning">Dry Cleaning RM5<br/>
service[]" value="Iron">Iron RM5<br/>

orm-group">
ddress" class="col-form-label">Additional Notes:</label>
ows="5" required name="address" id="address"></textarea>

</div>

<div class="right-w3l">

<input type="submit" class="form-control" value="pick my laundr

</div>

</br>

<input type="button" class="form-control" val

onClick="window.location.href='resit.php'" />

</br>

</form>

ry" name="submit">
lue ="RESIT" style="background-color: #CCF"

PAPARAN ANTARA MUKA SIGN UP

Langkah-langkah:
1. Menggunakan Microsoft office word
2. Untuk meletakkan teks di dalam bentuk rectangle klik kanan
3. Untuk membuat rectangle klik insert→shape kemudian pilih

n pada bentuk tersebut dan pilih add text
h bentuk rectangle

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

14. Kemudian buka perisian Adobe Dreamweaver CS6.