website design

Published on May 2016 | Categories: Documents | Downloads: 52 | Comments: 0 | Views: 552
of 36
Download PDF   Embed   Report

Comments

Content


1 | P a g e

ACKNOWLEDGEMENT


Assalamualaikum.....
First of all thanks to God because with His bless, I, from class HND 3C has successfully
complete my last assignment for Ms Office subject.
I would like to thank to all who give opinion on my task, especially to all class members and a
most honourable and dedication person, my lecturer, Madam Wan Ramlah for her support on
my assignment and together to motivate me in completing this task.
Besides that, I would like to thank to all my friends especially my classmate for their valuable
guidance and advice during completing this task. They were really had given me many useful
advices to work and their willingness to motivate and encourage me. I would like also to thank
them for showing me good of examples during this assignment in progress.
Last but not least, I would like to thank to everybody for helping me directly or indirectly on
completing this assignment. Finally, I hope my lecturer Madam Wan Ramlah will satisfy with my
work.









2 | P a g e

TASK 1

INTRODUCTION
Super D' Luscious Cakes is a company that provide variety category of product such
as cupcakes and dessert. Chef Duff Goldman founded Super D' Luscious Cakes in 2002,
when demand for his extraordinary cake creations required him to fling off the oppression of his
day job and follow his dream of being his own boss. Duff's success came quickly due to his
fearless attitude, unsinkable positive mentality, and passion for pushing the envelope. As the
business grew, he brought together a team of exceptionally talented artists and talent that
broadened Super D' Luscious Cakes portfolio and grew into one big happy cake making
family.
All the ingredients used in Super D' Luscious Cakes products are 100% halal, from
the base to the preservatives. Wonderful elements such as grapefruit, strawberry, various
essential oils, and butter are only a few of the hundreds of beneficial ingredients used in cakes
and desert products.
Other than that, our mission is to create the world's most exquisite cakes. Our inspiration
comes from everywhere: art, fashion, fabric, furniture, architecture, landscapes, science, music,
and history. Most of all, our inspiration to make cake and dessert comes from each one of our
incredible clients. Every cake we create is custom made from concept to consumption and is a
completely original piece of edible art. If you can imagine it, we can create it.
I had been asked by the Super D' Luscious Cakes to create a website for the
company as they want to use online marketing strategies so that the company can attract and
encourage the customer to purchase from the company by placing their order when they had
attracted to the Super D' Luscious Cakes latest product, packaging, price, company details
and so on. Thus, I had created the Super D' Luscious Cakes website to fulfill the company
requirements.

3 | P a g e

OVERVIEW

To develop the Super D' Luscious Cakes website, I had applied the established rules.
The reason for this is to ensure that the website can attract users to keep on exploring it. By
applying the established rules, I had used small image of products in the website. This is to
ensure that the page would not load for a long time. I had ensured that the page will be only
loading for 10 – 12 seconds according to the established rules. Aside from that, I also did not
used any of video or animation as to avoid the large time of loading page.
To make the website which is interactive and attractive, I had made a plan to make the
website by using the suitable establish rules. There are many establish rules can be applied in
making the good and attractive website. The first thing that I take a concern is about the
background of the website. The normal user, when they opened the website, the first thing that
will attract them and make them to evaluate is the background color of website. For the Super
D' Luscious Cakes, I had made this website to use purple colour as a background color. This
is suitable for the formal background of website. When Super D' Luscious Cakes use this
color, this is easy for the website to make an attractive color content and font. This is because,
the color of the background website can be match with any others color. The color of the font
that had been applied is white color for the content and dark purple color for the title of the
page. This is make customers easy to read the content of the page.
To make the website is more attractive; I had use design and visual logic establish rules.
The website without the visual impact such as shape, color and contrast, the page will getting
boring and the readers is not attractive to read it. This is because I had put many of image in
the Super D' Luscious Cakes website to attract the customer. Usually, reader’s eyes are more
interactive with the graphic than the text.
Next, the hyperlink I made was used the basic colour which is blue before clicked and
purple after clicked. The page length also did not too long as user no need to scroll down to the
bottom while they are exploring the website. I also had used table for several page created like
the purchase page where an order form was located. This table helps the form looks proper and
clear for the user. Lastly, the Super D' Luscious Cakes website content are the homepage,
4 | P a g e

promotion, cupcakes, dessert, about us, contact us, feedback and purchase. All this content are
necessary to attract the customers towards the website.
To make the website be more friendly user, I had make many hyperlink rather than to ask
customer to type. This is because, when customer need to type for anything they want to
search, the customer will feel annoying and do not want to visit the Super D' Luscious Cakes
website anymore. This is why, most of the information that customers will search, I had made a
button to link it such as Home, promotion, cupcakes, dessert, About Us, Contact Us, Feedback
and purchase, and latest news. This button can link to page that the customer want to look. For
the feedback and order form, there is “submit” and “reset” button. This is make customer easy
to submit the form and if they want to make the form is empty to fulfill the form again, they
can click the “reset” button. This means, they do not have to delete what they had filled in the
form and waste the time. This is can make the customer feel free to connect to the Super D'
Luscious Cakes website at any time they want.
For the typography, I had chosen to use a formal font in the content to make customers easy to
read and feel comfortable. For example, the content of the website I used “default font.” In the
establish rules, this is under the Serif font and this font is formal font which is suitable for the
human eyes to read. Let’s say, if I used Sans Serif font for the content, the eyes readers will
not easy to read the content. That type of the Sans Serif font is suitable for the Title to show
the title of the page. I had applied the suitable fonts for the headers and content to make
customers get what they are read and make them comfortable to read all the content inside.
Besides that, in using the typography, I had avoided to use all the uppercase. This is because,
by using all the uppercase, it is much harder for the customer to read. The size of the font that
I had uses also the formal size which is 10 pt until 12 pt size only.






5 | P a g e

TASK 2

APPLY SOFTWARE FOR EVALUATING DESIGN OF WEBSITE
Before proceed with the development of the Super D' Luscious Cakes website, I had applied
software for evaluating design for Super D' Luscious Cakes website. The example below was
gain from the ww.ibdjohn.com/design.

I had answered a questionnaire regarding the design rules grade. The grade as shown below


6 | P a g e

TASK 3

STORYBOARD









Home

Promotion

Cupcakes

Dessert

About us

Contact
Us

Feedback

Purchase

Welcome to our Super D' Luscious site
……………………………….
……………………………….
……………………………….
……………………………….

New Product Arrivals



Forget hampers this
CNY!!
------------------------------
------------------------------
----------------------------

Pic Pic Pic
LOGO COMPANY PICTURE SIMPLY SWEET CUPCAKE
PICTURE CUPCAKES PICTURE FLOWER
Latest News
PIC
PIC
Follow us on
FB TR IG
PIC PIC PIC PIC Copyright SUPER D Lucious
------------
------------
--
BUY NOW BUY NOW BUY NOW
------------
------------
--
------------
------------
--
Login admin
7 | P a g e















Home

Promotion

Cupcakes

Dessert

About us

Contact
Us

Feedback

Purchase


Promotion







Forget hampers this
CNY!!
------------------------------
------------------------------
----------------------------

LOGO COMPANY PICTURE SIMPLY SWEET CUPCAKE
PICTURE CUPCAKES PICTURE FLOWER
Latest News
PIC
PIC
Follow us on
FB TR IG
PIC PIC PIC PIC Copyright SUPER D Lucious




poster
Super D’ Lucious
8 | P a g e














Home

Promotion

Cupcakes

Dessert

About
us

Contact
Us

Feedback

Purchase


Cupcakes








Forget hampers this
CNY!!
------------------------------
------------------------------
----------------------------


Pic Pic
Pic
LOGO COMPANY PICTURE SIMPLY SWEET CUPCAKE
PICTURE CUPCAKES PICTURE FLOWER
Latest News
PIC
PIC
Follow us on
FB TR IG
PIC PIC PIC PIC Copyright SUPER D Lucious
------------
------------
--
BUY NOW
BUY NOW
BUY NOW
------------
------------
--
------------
------------
--
Pic Pic Pic
------------
------------
--
------------
------------
--
------------
------------
--
Super D’ Lucious
9 | P a g e



































Home

Promotion

Cupcakes

Dessert

About
us

Contact
Us

Feedback

Purchase


Dessert








Forget hampers this
CNY!!
------------------------------
------------------------------
----------------------------
-

Pic Pic
Pic
LOGO COMPANY PICTURE SIMPLY SWEET CUPCAKE
PICTURE CUPCAKES PICTURE FLOWER
Latest News
PIC
PIC
Follow us on
FB TR IG
PIC PIC PIC PIC Copyright SUPER D Lucious
------------
------------
--
BUY NOW
BUY NOW
BUY NOW
------------
------------
--
------------
------------
--
Pic Pic Pic
------------
------------
--
------------
------------
--
------------
------------
--
Super D’ Lucious
10 | P a g e















Home

Promotion

Cupcakes

Dessert

About us

Contact
Us

Feedback

Purchase


About Us








Forget hampers this
CNY!!
------------------------------
------------------------------
----------------------------

LOGO COMPANY PICTURE SIMPLY SWEET CUPCAKE
PICTURE CUPCAKES PICTURE FLOWER
Latest News
PIC
PIC
Follow us on
FB TR IG
PIC PIC PIC PIC Copyright SUPER D Lucious
Super D’ Lucious


----------------------------------------------------------------------
pic
11 | P a g e















Home

Promotion

Cupcakes

Dessert

About us

Contact
Us

Feedback

Purchase


Contact Us








Forget hampers this
CNY!!
------------------------------
------------------------------
----------------------------

LOGO COMPANY PICTURE SIMPLY SWEET CUPCAKE
PICTURE CUPCAKES PICTURE FLOWER
Latest News
PIC
PIC
Follow us on
FB TR IG
PIC PIC PIC PIC Copyright SUPER D Lucious
Super D’ Lucious


----------------------------------------------------------------------
pic
pic
12 | P a g e















Home

Promotion

Cupcakes

Dessert

About us

Contact
Us

Feedback

Purchase


FEEDBACK







Forget hampers this
CNY!!
------------------------------
------------------------------
----------------------------

LOGO COMPANY PICTURE SIMPLY SWEET CUPCAKE
PICTURE CUPCAKES PICTURE FLOWER
Latest News
PIC
PIC
Follow us on
FB TR IG
PIC PIC
PIC PIC Copyright SUPER D Lucious
Super D’ Lucious
13 | P a g e















Home

Promotion

Cupcakes

Dessert

About us

Contact
Us

Feedback

Purchase


Purchase







Forget hampers this
CNY!!
------------------------------
------------------------------
----------------------------

LOGO COMPANY PICTURE SIMPLY SWEET CUPCAKE
PICTURE CUPCAKES PICTURE FLOWER
Latest News
PIC
PIC
Follow us on
FB TR IG
PIC PIC
PIC PIC
Copyright SUPER D Lucious
site
Super D’ Lucious
14 | P a g e















Username :
Password :


SUCCESS!!
You are WebMaster!! You are qualify to :
View Purchase , Update Purchase
FAIL !!
Your username and passwords is incorrect.
Please try again.
Back to Login Page
Submit
LOGO
reset
Login Admin
15 | P a g e








16 | P a g e

LINKAGE
























17 | P a g e

TASK 4

MARK UP AND SCRIPTING LANGUAGE.

Markup language is a computer that uses tags to define elements within a document. Based on
my understanding, a markup language is symbols which give instruction on how a document
should appear. It's also known as a computer language for describing the syntax of tags. For
example, HTML,
According to website ( What is HTML anyway, 2011), HTML stands for HyperText Markup
Language. Developed by scientist Tim Berners-Lee in 1990, the HTML is the "hidden" code
that's Helps us Communicate with others on the World Wide Web (WWW).
When writing HTML, we add "tags" to the text in order to create the structure. These tags tell
the browser how to display the text or graphics in the document. The HTML was used when
creating the Super D' Luscious Cakes Website by using the Macromedia Dreamweaver.
Below is the evidence of the use of HTML.



18 | P a g e

I had also use PHP when designing the Super D' Luscious Cakes website. According
to the website (Free Computer Tutorials, 2012) PHP is probably the most popular scripting
language on the web. It is used to ENHANCE web pages. With PHP, we cans do things like
create username and password login pages, check details from a form, create forums, picture
galleries, surveys, and a whole lot more. If we have come across a web page that's ends in
PHP, Then the author has written missing programming code to liven up the plain, old HTML.
One of the main reason I had use PHP, PHP can be used to connect the database, to retrieve,
add or update the content of database. It can support for the large range of database. This is
because PHP had been built in the database connection modules. Besides that, PHP can create,
open, read write and close files on the server. PHP also used to generate the dynamic page
content.
Not only that, PHP can be run on different platforms such as Windows, Linux, Unix Mac OS and
other. By using the PHP, Super D' Luscious Cakes can be run in any platforms without
problems. Besides that, the PHP language security offers security as well that helps prevent
malicious attacks. So, by using the PHP language, it can keep the data of the customers safe.
The website that I make must use the database and save all the customer data in database, so,
PHP is suitable to use for.
Aside from that's, PHP is a server-sided language. That's because the PHP does not get
executed on our computer, but on the computer, we requested the page from. Then the results
are handed over to us, and displayed in our browser.

19 | P a g e

TASK 5

SOFTWARE USED TO DEVELOPED THE WEBSITE

According to the website (Definition of Adobe Photoshop, 2011) Adobe Photoshop is a graphics
editing program developed and published by Adobe Systems. Adobe's 2003 "Creative Suite"
rebranding led to Adobe Photoshop 8's renaming to Adobe Photoshop CS. Thus, Adobe
Photoshop CS6 is the 13th major release of Adobe Photoshop. The CS rebranding also resulted
in Adobe offering numerous software packages containing multiple Adobe programs for a
reduced price. Adobe Photoshop is released in two editions: Adobe Photoshop, and Adobe
Photoshop Extended, with the Extended having extra 3D image creation, motion graphics
editing, and advanced image analysis features. Adobe Photoshop Extended is included in all of
Adobe's Creative Suite offerings except Design Standard, which includes the Adobe Photoshop
edition.
So, here I had used Adobe Photoshop CS4 to create a poster for my website.
Adobe Photoshop CS4


20 | P a g e

Localhost Server
This server must be control by XAMPP software. As we know "Localhost is refers to the local
computer that a program is running on. For example, if you are running a Web browser on your
computer, your computer is considered to be the "localhost." While this does not need to be
specified when using a single computer, the localhost does need to be defined when running
programs from multiple computers.”
Other than that, XAMPP is an open-source web server package that works on various platforms.
It is actually an acronym with X meaning “cross” platform, A for Apache HTTP server, M for
MySQL, P for PHP, and P for Perl. XAMPP was designed to help webpage developers,
programmers, and designers check and review their work using their computers even without
connection to the web or internet.”

In the localhost interface, I had take phpMyAdmin to make a link database with my website as
my website had used database in the system. In the Macromedia Dreamweaver, I had use
dynamic page which is PHP page. This is can be connection with the mySql database in the
localhost.


21 | P a g e


So, when the customer had fulfilled the order form, the detail of the order will go to this
database. This is make admin can known the order of the customer. If there is no connection of
the database between the webpage and localhost, the customer order will disappear.
Macromedia Dreamweaver.

According to the website (what_is_macromedia_dreamweaver, 2013) Macromedia
Dreamweaver, now known as Adobe Dreamweaver is software used for web development. It is
a WYSIWYG web design and development tool. WYSIWYG stands for What You See Is What
You Get, and it allows the less technical people to write web pages without needing to know
coding or HTML.


22 | P a g e

TASK 6

CROSS LINKED PAGES
I had made 16 cross – linked in between the page created in the Super D' Luscious
Cakes website. Below are the examples of the cross – linked page in Super D' Luscious
Cakes website.
Homepage.

Promotions


23 | P a g e

Cupcakes

Dessert

About Us


24 | P a g e

Contact Us

Feedback

ViewCommentCake



25 | P a g e

UpdateRecordCake

ViewUpdateRecordCake


Purchase (order form)

26 | P a g e

ViewPurchaseCake

ViewUpdatePurchaseCake

admin

27 | P a g e

Success

Fail








28 | P a g e

TASK 7

SITE SHOULD LINK TO OTHER EXISTING WEBSITE
I had made the hyperlink in the Super D' Luscious Cakes that will link to the
cupcakesrock.com. Here, the customer of Super D' Luscious Cakes may explore the Top 5
bakery in Malaysia.




29 | P a g e

TASK 8

PUBLISH WEBSITE ON A SERVER/ WEB HOST
This is the website of the Super D' Luscious Cakes
http://localhost/delicious/Home.html









30 | P a g e

TASK 9

THE WEBSITE SHOULD INCLUDE CUSTOMER INTERACTION (INSERT, VIEW, DELETE
AND ETC).
In Super D' Luscious Cakes website, customer can make interaction by inserting their order
through the order form provided. I had made for this website which is insert the feedback and
purchase, view feedback and purchase, delete the feedback and purchase, update feedback
and purchase and last result for after update the feedback and purchase. When the customer
want to make an order, they have to go to the order form button which is had been place in
each page. After fulfil the form, the customers need to submit by click the “submit” button. If
they want to reset their form, they need to click “reset” button which is provided at the below
of the form. Super D' Luscious Cakes

SUBMIT AND RESET OF FEEDBACK



After the customer had fulfill the feedback, their feedback and order detail will be save at
localhost in phpMyAdmin in the file database Super D' Luscious Cakes.

31 | P a g e

SUBMIT AND RESET OF PURCHASE (ORDER FORM)


After the customer had fulfill the order form, their feedback and order detail will be save at
localhost in phpMyAdmin in the file database Super D' Luscious Cakes.




32 | P a g e

If the customer wants to view their feedback and order after submitting the form or want to
update their feedback and order, the customer can click update button at the below of the
form. After clicking that, they can view their feedback and order and update their order. This is
the view of the customer’s order. The picture below show that about updated button and view
of feedback and purchase
UPDATED BUTTON AND VIEW OF FEEDBACK



UPDATED BUTTON AND VIEW OF PURCHASE

33 | P a g e



To delete the order, admin can view the customer’s feedback and order. This is automatically
will be delete in localhost database. Picture below show that about delete comment of feedback
and order purchase.
DELETE COMMENT OF FEEDBACK

DELETE COMMENT OF PURCHASE


34 | P a g e

TASK 10

While designing the Super D' Luscious Cakes website, I had manage it properly by placing all
the properties I had use such as image and the dreamweaver file in the computer disk C. The
Super D' Luscious Cakes file was located in xampp, htdoc and delicious.
















35 | P a g e

CONCLUSION

In my conclusion, this website had be create with the creative, attractive and friendly user. This
website is creative and attractive to attract the customers to always view this page. This page
had been created to be friendly user to the customers to make them easily and understand to
explore this page. Besides that, it will make the customer feel comfortable to use this website.
As we know, Super D' Luscious Cakes website also had been created to be consistent in
every page. If the website not created to be consistence in every page, the content and the
text will poured into the users screen and the readers will feel annoyed to view the website.
So that, Super D' Luscious Cakes” must be created like a professional website and make the
readers feel comfortable to view for everytime.












36 | P a g e

REFERENCES

What is HTML anyway. (2011, March 12). Retrieved from goodellgroup.com:
http://www.goodellgroup.com/tutorial/chapter1.html
Definition of Adobe Photoshop. (2011, March 11). Retrieved from Adobe_Photosho:
http://www.webopedia.com/TERM/A/Adobe_Photoshop.html
Free Computer Tutorials. (2012, March 15). Retrieved from Home & Learn: www.homeandlearn.co.uk,
what_is_macromedia_dreamweaver. (2013, July 11). Retrieved from answers.ask.com:
http://answers.ask.com/computers/software/what_is_macromedia_dreamweaver




Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close