乐趣区

关于es6:AST20201-Web-Programming

DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
AST20201 Web Programming
1
AST20201 Web Programming
Group Project
A. Objectives
By working on this project, a number of Course Intended Learning Outcomes would be
achieved, particularly on the last item.
 Apply HTML5 and Java Enterprise Technology to e-Business applications;
 Create interactive Web using JavaServer Pages and an appropriate database server;
 Manage Java Servlet and Filter concepts on advanced Web application development;
 Apply appropriate technology to handle Web application security;
 Evaluate Java-based Content Management Systems for building Web-based Enterprise
Resource Planning (ERP) application.
B. Overview of Technologies Being Used

  1. Use HTML5, CSS3, JavaScript or JQuery and Ajax for client programming;
  2. Use Java servlets, JavaServer Pages (JSP) for server-side programming;
  3. Use JavaBeans for session management
  4. Use JDBC to connect to some SQL database server (presumably MySQL)
  5. … and more, say, if you use an MVC framework like Spring or JSF (JavaServer Faces)
    C. Introduction
    Amazon, eBay, Taobao are online shopping giants that we knew very well. Take Taobao as an
    example for discussion. It is not a single e-shop but an e-commerce platform provider. It
    provides a platform or content management system (CMS) for sellers to publish and manage
    their shops on Taobao. Now, your role is much like Taobao – an e-commerce platform provider,
    which provides two kinds of user interfaces:
  6. Seller interface
  7. Buyer interface
    You should evaluate some open-source e-Commerce platforms like the examples in the
    following links and then implement a prototype of an e-Commerce solution.
    https://selfstartr.com/open-s…
    https://blog.capterra.com/bes…
    When creating your prototype, you have to design your database and the GUI in web page
    format to support both seller and buyer activities.
    There are actually two more interrelated platforms or external interfaces gluing the entire ecommerce
    platform:
     Shipping (goods delivery) and
     Payment gateways for monetary settlement
    But these two external interfaces are beyond our control or outside the scope of this project;
    you can simply ignore them all, and assume the data about goods delivery and payment are
    stored in the database of the e-commerce web application.
    DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
    AST20201 Web Programming
    2
    D. Basic Functional Requirements
    For Customers (Buyers):
  8. Browse the products (suggestion: use thumbnails on a photo grid view).
  9. Click on the product (thumbnail) to view the product’s detailed information.
  10. Search a product in a search bar by keyword.
  11. Log in the shopping site
  12. Add shopped items to shopping cart (the system maintains a user session)
  13. Check out the cart, and get a receipt of the transaction.
  14. Comment on the purchased products.
    For Shops (Sellers):
  15. Log in the system and perform administration of the shop and their products.
  16. CRUD (Create, Read, Update, Delete) for each product, e.g. update the description or the
    stock of a particular product.
  17. Read the purchase orders posted by customers
    For the e-Commerce Platform Administrator:
  18. Has basic control like product category management.
  19. CRUD for shops
    E. User Interfaces
    The buyer interface is much like any online shopping malls. You can search a product by
    keyword or look up via a category index. Products are generally displayed in a photo grid with
    price, product title and/or a brief description. One advanced feature is to let buyers leave
    comments on a product after receiving and using it.
    DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
    AST20201 Web Programming
    3
    The seller interface is an administrative webpage that can be used to create a new shop and the
    products to be sold under it. This part is much like a Content Management System (CMS).
    Perhaps not every piece of data can be managed through this interface, but it should be able to
    manage the list of products, and the details of each product, including the photos associated
    with a product.
    Responsive Web Design is one aspect we would look at when judging the design of your web
    application. Your website layout should be able to adapt to the screen sizes of different devices
    (desktop PCs, tablets and smartphones) for achieving the best user experience.
    When doing HTTP post or get, the use of AJAX for partial HTML update instead of full page
    reloading is another thing that determines the quality of your prototype.
    F. Code Implementation
    Important: To match with our course intended learning outcomes, there is one rule to
    observe: for the server-side programming, you are required to use Java EE (servlets, JSP)
    instead of PHP or other languages like .NET.
    You are highly encouraged to use GitHub to perform source version control of your web
    application.
    Notes on Software Development Tools
    IDE: You are supposed to use Netbeans or Eclipse to develop your web prototype. If you opt
    for other IDEs, then your marker has to install the IDE in order to open your web project, and
    this will complicate the marking.
    Web Application Server (Servlet Container): Please choose either Oracle GlassFish or
    Apache Tomcat. Both of them have been bundled with Netbeans. Other choices are excluded.
    If you would attempt the bonus part (real web server deployment), then you may better use
    Tomcat for your testing, so you can easily deploy the web application later to some free hosting
    services like Redhat’s OpenShift or Amazon’s AWS Beanstalk. You also need to give up using
    EJB (Enterprise JavaBeans) because Tomcat is not an EJB container while GlassFish is. EJB
    is out of our syllabus and we expect that you won’t use it.
    Database Server: Please stick to the only choice – MySQL Community Server – for simplicity
    of our marking.
    Third-party Plugins/Libraries: We would like to assess your web programming skills using
    Java servlets, JSP, JavaScript, jQuery, HTML, and CSS in this project. If you have incorporated
    any third-party UI controls like jQuery plugins, you MUST state or acknowledge them clearly
    in the report. Depending on the complexity of using the plugins, we might regard these as your
    integration effort rather than programming effort. On the other hand, when writing JSP pages
    say, feel free to use JSTL (JSP Standard Tag Library), which is not regarded third-party but
    official, and your effort of using it is counted towards programming effort.
    DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
    AST20201 Web Programming
    4
    Application Frameworks:
    It is quite common nowadays for web developers to adopt third-party application frameworks
    for rapid application development. For CSS, feel free to use any frameworks like Bootstrap,
    Materialize, Foundation, W3.CSS, etc. For client-side JavaScript frameworks, there are a glut
    of choices: AngularJS, Knockout, React, Vue, Ember, and many others. Using their APIs is
    much like learning another programming language. For simplicity and aligning with our
    syllabus better, we still recommend using the jQuery library alone, but you are still granted the
    freedom to use these other JS frameworks. For server-side frameworks, since our requirement
    is to use Java EE, you might choose to use a Java-based MVC framework, presumably Spring
    MVC for our easier marking. Some advanced features like using the Hibernate framework or
    EJB (Enterprise JavaBeans) implementations for object persistence is not required and not
    recommended in this project as this complicates our marking too much.
    G. Testing Data
    You need to generate your own testing data. This web application that you are going to build
    is just a prototype for proof of concept mainly. Therefore, you don’t need to care too much
    about whether the categories are products are wide enough. You may feel free to pick only a
    handful of categories of goods to sell, e.g. fashion, electronic devices, furniture, toys, and
    prepare around 10 products under each category. You can capture some product information
    and product images from Amazon, eBay or Taobao to be your testing data (indeed, Amazon
    provides Web APIs for the public to download their product data). This will make your
    prototype look more real-life, and save your time of writing up product descriptions, and
    drawing pictures or taking photos for your products.
    H. Deployment to the Internet (Optional Bonus Part)
    We expect team-based demonstration of your web prototype in Week 14 on a local server
    environment – likely your laptop PC with application and database servers installed. But we
    encourage you to gain real experience of web application deployment by launching your
    prototype to some web server accessible on the Internet. We will reward extra bonus marks if
    you do so. One possible way is to convert your home desktop PC into a Web server (if your
    home IP is static or if you apply some dynamic DNS service). Another way is to try some
    public Web hosting services; choices that are free of charge and useful for our project are:
     OpenShift by Red Hat provides free plan to work with JSP, Java servlets, and Spring
    framework. It seems to support launching a MySQL instance as well. This is the most
    suitable for deploying your project.
     Amazon’s AWS Elastic Beanstalk provides service for deploying and scaling web
    applications and services developed with Java. They use Apache Tomcat as the web
    application container. You can apply a free account for trial. So, it looks suitable for this
    project too. Another choice is to use Amazon EC2. A virtual machine instance in cloud
    will be given to you, and you can connect to the machine via SSH. Normally, you will be
    given a Linux environment. Then you may install and customize everything like Tomcat,
    MySQL server and other software by yourself there (some guidelines are here) – this gives
    you the most freedom at the cost of environment setup efforts.
     Heroku | Cloud Application Platform also offers free plan which you can try
    DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
    AST20201 Web Programming
    5
     Google App Engine also supports Java. To learn more, you may go through this tutorial.
    For Google App Engine, setting it up to use MySQL is very hard; Google wants you to
    use its Cloud SQL. You can get a free trial, but it seems to ask for your credit card number
    in order to let you register as a user.
    I. Technical Report
    About 10 to 20 pages (but no specific limitations). Content may include:
  20. Cover page with group id and group member names
  21. Labor division and overall contribution per member in percentage (very important)
  22. Introduction of the project or your website
  23. Database design, e.g. presenting an ER diagram
  24. Listing the functional requirements that you have implemented
  25. Activity or sequence diagrams (UML)
  26. Description of your implementation, e.g. what technologies you used for each part, some
    very high-level code walkthroughs on major functionality, citation of any 3-rd party
    plugins, tools, frameworks, …
  27. Screenshots of your web prototype (presented in a logical navigation flow)
  28. List of References (books, online articles, …)
    J. Prototype Demonstration
    Every team will be given at most 15 minutes (Q&A time included) to present and demonstrate
    their web prototype in front of the class. You may use a short PowerPoint slide to introduce
    your team and the design of your prototype, but this is optional and to be brief. The key is to
    demonstrate your implemented website interactively.
    K. Deliverables and Submission
    The deadline for submission of your group project is by the end of Week 14. You have to
    submit a zip file that contains the following deliverables:
  29. Your Netbeans or Eclipse project directory, which contains
    a. All the source files: .jsp, .java, .html, .css;
    b. Configuration files: web.xml, project settings, …
    c. Resource files: images, videos (if any), audios (if any);
    d. Your exported database (both schemas and data) in form of a SQL script
    (Refer to this page to learn how to export);
    e. Binaries of all 3-party libraries or plugins that you have adopted.
    f. A readme text file, which documents
    i. the URL of your deployed web site (if any)
    ii. installation methods of 3-party libraries or custom configuration needed (if any)
  30. Your technical report
  31. Your presentation PowerPoint (if any)
    DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
    AST20201 Web Programming
    6
    L. Marking Scheme and Rubrics
    Note: The total marks including bonus points will be capped as 100% (equivalent to 20%
    course-level marks).
    Refer also to the following rubrics to know more about how your prototype being demonstrated
    will be assessed for assessment items 1 to 3.
  • We said that interface with a payment gateway is skipped in this project because it is hard to find one that is
    free for experiments. But you can try PayPal Sandbox, which is free, if you’d implement it for completeness.
    Graded items Weighting
    UI/UX Design and Stuffing for Your Web
  • Your website layout, hierarchy of navigation, links, information put in the
    web, graphics, and styling
    20%
    Coding and Implementation
  • Client-side Development
    Functionality:
  • Input validation
  • Partial update of the page via Ajax calls
  • Implementation of Responsive Web Design (RWD) – adapt to screen sizes
    using fluid grids, media queries and flexible images or media
    (Technologies involved: HTML5, CSS3, JavaScript or JQuery)
    20%
  • Server-side Development
  • Browsing and searching on the shopping site
  • HTTP session, shopping cart, place orders, post comments on products
  • CRUD operations for shops, product categories, and products
    (Technologies involved: Java servlets, JSP, JavaBeans, JDBC)
    30%
  • Database implementation 10%
    Report and Demonstration
  • Technical report summarizing your team’s project work 10%
  • Oral presentation/demo (to be done at week 14) 10%
    Bonus Part
  • Deployment to a real web server environment +10% (max)
  • Adopting an MVC design pattern or an MVC framework +10% (max)
  • Any additional functional features, e.g. integration with social networks,
    calling some external Web services like Google Map, PayPal API*
    , …
    +10% (max)
    Total: 100%
    DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
    AST20201 Web Programming
    7
    Rubric for Assessment Item 1 (UI/UX Design and Stuffing for Your Web)
    Beginning Developing Accomplished Exemplary
    Layout/Design The pages are
    unattractive. Text
    is difficult to read.
    The backgrounds
    are distracting.
    The pages appear
    “busy”or“boring”.
    Text may be
    difficult to read.
    The backgrounds
    are somewhat
    distracting.
    The pages are eyecatching
    and
    attractive. Text is
    easy to read. The
    backgrounds are
    subtle and
    appropriate.
    The pages are well
    organized with
    tables. Text spacing
    and alignment make
    reading easy. The
    backgrounds
    enhance the page.
    Graphics There are no
    photos, icons or clip
    art or they are
    inappropriate or of
    low quality.
    Photos are blurry or
    fuzzy; icons and
    clip art do not“fit”
    with the topic. Too
    many pictures make
    the download time
    slow.
    Photos, icons, and
    clip art are
    appropriate, of high
    quality, and
    download fairly
    quickly.
    Photos, icons, and
    clip art are used
    creatively and may
    follow a theme.
    Information Information is
    poorly written,
    inaccurate, or
    incomplete.
    Information could
    be better written
    and too much
    information is given
    in each section.
    Information is well
    written and
    interesting to read
    and is presented in
    short sections.
    Information is
    creatively written
    and cleverly
    presented.
    Navigation/Links The user may
    become lost or links
    may be missing or
    not working.
    The user may
    become confused
    when navigating
    between pages.
    Some links may not
    work.
    Links are consistent
    and easy to find so
    that the user can
    easily navigate back
    and forth through
    pages.
    Links are created
    with images and
    icons to enhance
    the text links.
    Rubric for Assessment Item 2 (Client-side Development)
    Beginning Developing Accomplished Exemplary
    Client-side
    Functionality
    (Response and
    Ajax-based)
    The visual design is
    of a poor standard
    and can only be
    viewed in one
    viewport, with
    many issues
    present. The
    navigation system
    is poor and
    interactions provide
    a poor experience
    overall. Ajax is not
    used.
    The visual design is
    of a satisfactory
    standard and
    responsive across
    two viewports, with
    some issues
    present. The
    navigation system
    is appropriate and
    interactions provide
    a satisfactory
    experience overall.
    Ajax is not used, or
    used but resulting
    some issues.
    The visual design is
    of a good standard
    and responsive
    across multiple
    viewports, with
    some minor issues.
    The navigation
    system is
    appropriate and
    interactions provide
    a good experience
    overall. Ajax is
    used for partial
    update, but
    sometimes
    reloading the full
    page.
    The visual design is
    highly professional
    and responsive
    across multiple
    viewports. A
    responsive
    navigation is
    incorporated and
    thought has been
    put into how the
    user interacts with
    application to
    provide an excellent
    experience. Ajax is
    used intensively
    instead of reloading
    the full page often.
    Client-side
    Development
    Quality
    (HTML / CSS /
    JS / jQuery)
    HTML, CSS render
    inappropriately in
    the browser. Event
    handling gets to be
    wrong.
    HTML and CSS
    sometimes cause
    issues when
    rendering in the
    browser.
    HTML, CSS and JS
    code are mostly
    well written and
    partially
    documented.
    HTML, CSS, and
    JS code are all well
    written and fully
    documented.
    DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
    AST20201 Web Programming
    8
    Rubric for Assessment Item 3 (Server-side Development)
    Beginning Developing Accomplished Exemplary
    Server-side
    Functionality
    (Browse /
    Search / Order /
    Comment /
    User session
    (shopping cart) /
    CRUD for admin
    of DB objects)
    Minimal effort.
    Both buyer and
    seller
    functionalities do
    not work well.
    Buyer can browse
    and sellers can post
    products.
    Transactions can be
    placed.
    Buyer can browse
    and search for
    products; sellers
    can perform CRUD
    on products.
    Platform admin can
    perform CRUD on
    product categories.
    Transactions can be
    placed.
    Buyer can browse
    and search for
    products; user
    session and
    shopping cart are
    working; sellers can
    perform CRUD on
    products. Platform
    admin can perform
    CRUD on product
    categories.
    Transactions can be
    placed.
    Server-side
    Development
    (JSP / Servlets /
    JavaBeans)
    The Web app works
    with a number of
    errors. An attempt
    is made at one
    client server
    interaction, which
    will partially work.
    Code could be
    better written.
    The Web app works
    with a few errors,
    and demonstrates at
    least one client
    server interaction.
    Code is mostly
    written correctly,
    but a few minor
    issues are visible
    when it runs.
    The Web app works
    with only minor
    errors, and
    demonstrates
    multiple client
    server interactions.
    Code is written and
    organised
    appropriately and is
    mostly commented.
    The Web app works
    without any major
    errors†
    , and
    demonstrates
    multiple client
    server interactions
    appropriate to the
    scenario. Code is
    written and
    organised
    professionally and
    is fully commented.

† Your web app’s correctness will be checked; one example is about the correctness of updating the stock of a
product; suppose multiple clients are buying the same product concurrently, is its stock in the database deducted
correctly?

请加 QQ:99515681 或邮箱:99515681@qq.com WX:codehelp

退出移动版