Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • IA Documentation

    Загружено:

    DemonY
    10 просмотров18 страниц
    Internet Application

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    DOCX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Internet Application

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    10 просмотров18 страниц

    IA Documentation

    Загружено:

    DemonY
    Internet Application

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 18

    Modules Name : Internet Applications

    Module Code : AINT001-4-1-IA

    Group Member : Tan Jit Ming TP038471

    Ooi Jian Rong TP038511

    Yong Zheng Sheng TP038227

    Lecture Name : MS.SATHIAPRIYA A/P RAMIAH

    Submission Date : 10th June 2016


    Contents
    Introduction................................................................................................................................3

    Website Development Method...................................................................................................4

    HTML....................................................................................................................................4

    Cascading Style Sheet............................................................................................................5

    JavaScript...............................................................................................................................6

    Screenshot..................................................................................................................................7

    home.......................................................................................................................................7

    Menu......................................................................................................................................7

    Sign Up...................................................................................................................................8

    Sign In....................................................................................................................................8

    Forgot Password.....................................................................................................................9

    Menu(opened)........................................................................................................................9

    Booking................................................................................................................................10

    About Us..............................................................................................................................10

    Feedback...............................................................................................................................11

    FAQ......................................................................................................................................11

    FAQ 2...................................................................................................................................12

    Successful pages...................................................................................................................12

    Navigational Structure.............................................................................................................14

    Conclusion................................................................................................................................15

    References................................................................................................................................16

    Appendix..................................................................................................................................17
    Introduction
    J&M cafe owner started his business in January 2016. His business grown rapidly after he
    won the global award for his cafe. He has many customer and currently his customers make
    reservation by phone calls. So, he requested a website for his cafe.

    The objectives of this website:

    Let reservation process faster and easier


    Let user check the cafe for weekly special menu
    Let user to know more about the cafe history

    The scope of this website:

    Make reservation online


    Let user sign up as member
    Let user see the menu online

    As a summary, this website will have a page featuring weekly special menu on the homepage,
    a login page, sign up page, frequently asked question page, reservation page and other.
    Website Development Method
    HTML

    Figure 1 Segment of homepage html

    <head> tag represent the documents header. In the Head Element, we can declare the
    hyperlink to CSS style sheet and JavaScript to be used in this page. The <title> tag is used to
    mention the page title.

    <body> tag defines the documents body. It contains all the text, hyperlinks, images, tables,
    and lists. <h1> is the header
    Cascading Style Sheet

    Picture above is the CSS of the webpage. The function of display in CSS is control
    the layout and every element has a default display value depending on what type of the
    element. Besides, the function of zoom in CSS is to allow you to scale the content. (zoom |
    CSS-Tricks, 2011) The CSS padding are used to generate space around the content. The
    padding properties set the size of the white space between the element content and the
    element border. Furthermore, the margin-bottom property sets the bottom margin of an
    element. The font-size properties is allow the text to change the size. The line-height property
    specifies the line height of the content. The CSS colours are defined using a hexadecimal
    notation for the combination of colour. CSS test-align property specifies the horizontal
    alignment of text in an element. The vertical-align property sets the vertical alignment of an
    element. Background-colour is to display the colour of the background of the content.

    Moreover, the function of background-repeat in CSS is to repeat the background


    image. (CSS background-repeat property, 2016)Border in CSS is to allow you to specify the
    style, width, and colour of the elements border. The function of the webkit-border-radius is
    there will give any element rounded corners. In addition, cursor in CSS is to specify the
    type of cursor to be displaced when pointing on the element. The margin-left in CSS is to set
    the margin of an element into left side. Last but not least, the function of background-image
    is to set one or more background images for the element.
    JavaScript

    Picture above is the Java Script of the webpage. The uses of function in java script is a block
    of code designed to perform a particular task. The functions name can contain letters, digits,
    underscores and dollar signs. Inside the function, the arguments behave as local variables.
    (JavaScript Functions, 2016) (zoom | CSS-Tricks, 2011)

    The function of return false in java script is to determine whether or not the default browser
    behaviour should take place as well. In the case of clicking on links, this would be following
    the link, but the difference is most noticeable in form submit handlers, where you can cancel
    a form submission if the user has made a mistake entering the information.
    Screenshot
    home

    Figure 2: Homepage

    Figure 1 show the homepage of J&M caf. On top of the webpage has a menu bar of J&M
    caf and there has some picture and description of J&M caf below the menu bar.

    Menu

    Figure 3: Menu cover


    Figure 2 is the menu cover of J&M caf and it contain the address and phone number of J&M
    caf.
    Sign Up

    Figure 4: Sign up page

    Figure 3 is the sign up page of J&M caf. First you must fill up your basic info which are
    username/email, password, age, and name. After fill up all info and click the sign up button to
    proceed.

    Sign In

    Figure 5: Sign in page

    Figure 4 show the sign in page of J&M caf, enter your username and password to sign in.
    Forgot Password

    Figure 6: Reset password page

    Figure 5 show the reset password page. You can click the forgot password button on the sign
    in page if you forgot your password. After that, enter your current password and new
    password to reset your password.

    Menu(opened)

    Figure 7: J&M Menu

    Figure 6 show the menu of J&M. It contains the details and pictures of the food and drinks in
    J&M caf
    Booking

    Figure 8: Reservation page

    Figure 7 show the reservation page of J&M caf. You must insert your info which are name,
    email address, phone number, date & time, and the number of person before you submit it.

    About Us

    Figure 9: History of J&M caf

    Figure 8 is the brief history of J&M caf. It contain the information of the owner and how he
    can success to begin his business.
    Feedback

    Figure 10: Feedback form of J&M caf

    Figure 9 is the feedback form of J&M caf. Customer can comment their feedback in this
    form and the worker of J&M caf will improve it.

    FAQ

    Figure 11: FAQ page about account of J&M caf

    Figure 10 show the FAQ page of J&M caf. Customer can open this FAQ webpage when they
    face any issue about the website. For instance, they dont know how to sign up an account,
    how to login and how if forgot their password.
    FAQ 2

    Figure 12: FAQ page about reservation of J&M caf

    Figure 11 is the FAQ page about the reservation of J&M caf. Customer can browse this FAQ
    webpage when they have any issue about the reservation. This page contain how to do a
    reservation and what is the booking status.

    Successful pages

    Figure 13: Reservation successful page

    Figure 14: Submit feedback successful page


    Figure 15: Login successful page

    Figure 16: Sign up successful page

    Figure 12 show the page that customer success to do their reservation. Figure 13 show the
    page when customers submit their feedback form successfully. Figure 14 show the page that
    customer login successful and figure 15 show the page that customer successfully to sign up
    their account.
    Navigational Structure
    Conclusion
    As a conclusion, this website combined basic and advanced coding in HTML, CSS,
    JavaScript as seen in menu page. This website can be improved by adding a user profile page
    and saved the information of the registered user to a server. Moreover, the menu page can be
    extended to more pages if the cafe has more variety of food or drinks. The sign up page can
    include more information to fill in such as address, recommendation from which person, and
    more. Besides that, the gallery page can add more pictures.
    References
    1. W3schools.com. (2016). CSS background-repeat property. [online] Available at:
    http://www.w3schools.com/cssref/pr_background-repeat.asp [Accessed 10 Jun. 2016].

    2. W3schools.com. (2016). JavaScript Functions. [online] Available at:


    http://www.w3schools.com/js/js_functions.asp [Accessed 10 Jun. 2016].

    3. CSS-Tricks. (2011). zoom | CSS-Tricks. [online] Available at: https://css-


    tricks.com/almanac/properties/z/zoom/ [Accessed 10 Jun. 2016].
    Appendix

    Вам также может понравиться