” AST20201 写作、Java，HTML程序语言调试DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversityAST20201 Web Programming1AST20201 Web ProgrammingGroup ProjectA. ObjectivesBy working on this project, a number of Course Intended Learning Outcomes would beachieved, 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 EnterpriseResource Planning (ERP) application.B. Overview of Technologies Being Used1. 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 management4. 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. IntroductionAmazon, eBay, Taobao are online shopping giants that we knew very well. Take Taobao as anexample for discussion. It is not a single e-shop but an e-commerce platform provider. Itprovides a platform or content management system (CMS) for sellers to publish and managetheir shops on Taobao. Now, your role is much like Taobao an e-commerce platform provider,which provides two kinds of user interfaces:- Seller interface- Buyer interfaceYou should evaluate some open-source e-Commerce platforms like the examples in thefollowing links and then implement a prototype of an e-Commerce solution. httpss://selfstartr.com/open-source-ecommerce/ httpss://blog.capterra.com/best-free-open-source-ecommerce-software-solutions/When creating your Prototype, you have to design your database and the GUI in web pageformat to support both seller and buyer activities.There are actually two more interrelated platforms or external interfaces gluing the entire ecommerceplatform: Shipping (goods delivery) and Payment gateways for monetary settlementBut 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 arestored in the database of the e-commerce web application.DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversityAST20201 Web Programming2D. Basic Functional RequirementsFor Customers (Buyers):1. Browse the products (suggestion: use thumbnails on a photo grid view).2. Click on the product (thumbnail) to view the products detailed information.3. Search a product in a search bar by keyword.4. Log in the shopping site5. Add shopped items to shopping cart (the system maintains a user session)6. Check out the cart, and get a receipt of the transaction.7. Comment on the purchased products.For Shops (Sellers):8. Log in the system and perform administration of the shop and their products.9. CRUD (Create, Read, Update, Delete) for each product, e.g. update the description or thestock of a particular product.10. Read the purchase orders posted by customersFor the e-Commerce Platform Administrator:11. Has basic control like product category management.12. CRUD for shopsE. User InterfacesThe buyer interface is much like any online shopping malls. You can search a product bykeyword or look up via a category index. Products are generally displayed in a photo grid withprice, product title and/or a brief description. One advanced feature is to let buyers leavecomments on a product after Receiving and using it.DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversityAST20201 Web Programming3The seller interface is an administrative webpage that can be used to create a new shop and theproducts 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 tomanage the list of products, and the details of each product, including the photos associatedwith a product.Responsive Web Design is one aspect we would look at when judging the design of your webapplication. 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 pagereloading is another thing that determines the quality of your prototype.F. Code ImplementationImportant: To match with our course intended learning outcomes, there is one rule toobserve: 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 webapplication.Notes on Software Development ToolsIDE: You are supposed to use Netbeans or Eclipse to develop your web prototype. If you optfor other IDEs, then your marker has to install the IDE in order to open your web project, andthis will complicate the marking.Web Application Server (Servlet Container): Please choose either Oracle GlassFish orApache 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 useTomcat for your testing, so you can easily deploy the web application later to some free hostingservices like Redhats OpenShift or Amazons AWS Beanstalk. You also need to give up usingEJB (Enterprise JavaBeans) because Tomcat is not an EJB container while GlassFish is. EJBis out of our syllabus and we expect that you wont use it.Database Server: Please Stick to the only choice MySQL Community Server for simplicityof our marking.Third-party Plugins/Libraries: We would like to assess your web programming skills usingJava servlets, JSP, JavaScript, jQuery, HTML, and CSS in this project. If you have incorporatedany third-party UI controls like jQuery plugins, you MUST state or acknowledge them clearlyin the report. Depending on the complexity of using the plugins, we might regard these as yourintegration effort rather than programming effort. On the other hand, when writing JSP pagessay, feel free to use JSTL (JSP Standard Tag Library), which is not regarded third-party butofficial, and your effort of using it is counted towards programming effort.DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversityAST20201 Web Programming4Application Frameworks:It is quite common nowadays for web developers to adopt third-party application frameworksfor 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 glutof choices: AngularJS, Knockout, React, Vue, Ember, and many others. Using their APIs ismuch like learning another programming language. For simplicity and aligning with oursyllabus better, we still recommend using the jQuery library alone, but you are still granted thefreedom to use these other JS frameworks. For server-side frameworks, since our requirementis to use Java EE, you might choose to use a Java-based MVC framework, presumably SpringMVC for our easier marking. Some advanced features like using the Hibernate framework orEJB (Enterprise JavaBeans) implementations for object persistence is not required and notrecommended in this project as this complicates our marking too much.G. Testing DataYou need to generate your own testing data. This web application that you are going to buildis just a prototype for proof of concept mainly. Therefore, you dont need to care too muchabout whether the categories are products are wide enough. You may feel free to pick only ahandful of categories of goods to sell, e.g. fashion, electronic devices, furniture, toys, andprepare around 10 products under each category. You can capture some product informationand product images from Amazon, eBay or Taobao to be your testing data (indeed, Amazonprovides Web APIs for the public to download their product data). This will make yourprototype look more real-life, And save your time of writing up product descriptions, anddrawing 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 serverenvironment likely your laptop PC with application and database servers installed. But weencourage you to gain real experience of web application deployment by launching yourprototype to some web server accessible on the Internet. We will reward extra bonus marks ifyou do so. One possible way is to convert your home desktop PC into a Web server (if yourhome IP is static or if you apply some dynamic DNS service). Another way is to try somepublic 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 Springframework. It seems to support launching a MySQL instance as well. This is the mostsuitable for deploying your project. Amazons AWS Elastic Beanstalk provides service for deploying and scaling webapplications and services developed with Java. They use Apache Tomcat as the webapplication container. You can apply a free account for trial. So, it looks suitable for thisproject too. Another choice is to use Amazon EC2. A virtual machine instance in cloudwill be given to you, and you can connect to the machine via SSH. Normally, you will begiven 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 givesyou the most freedom at the cost of environment setup efforts. Heroku | Cloud Application Platform also offers free plan which you can tryDivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversityAST20201 Web Programming5 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 touse its Cloud SQL. You can get a free trial, but it seems to ask for your credit card numberin order to let you register as a user.I. Technical ReportAbout 10 to 20 pages (but no specific limitations). Content may include:1. Cover page with group id and group member names2. Labor division and overall contribution per member in percentage (very important)3. Introduction of the project or your website4. Database design, e.g. presenting an ER diagram5. Listing the functional requirements that you have implemented6. Activity or sequence diagrams (UML)7. Description of your implementation, e.g. what technologies you used for each part, somevery high-level code Walkthroughs on major functionality, citation of any 3-rd partyplugins, tools, frameworks, 8. Screenshots of your web prototype (presented in a logical navigation flow)9. List of References (books, online articles, )J. Prototype DemonstrationEvery team will be given at most 15 minutes (QA time included) to present and demonstratetheir web prototype in front of the class. You may use a short PowerPoint slide to introduceyour team and the design of your prototype, but this is optional and to be brief. The key is todemonstrate your implemented website interactively.K. Deliverables and SubmissionThe deadline for submission of your group project is by the end of Week 14. You have tosubmit a zip file that contains the following deliverables:1. Your Netbeans or Eclipse project directory, which containsa. 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 documentsi. the URL of your deployed web site (if any)ii. installation methods of 3-party libraries or custom configuration needed (if any)2. Your technical report3. Your presentation PowerPoint (if any)DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversityAST20201 Web Programming6L. Marking Scheme and RubricsNote: 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 demonstratedwill 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 isfree for experiments. But you can try PayPal Sandbox, which is free, if youd implement it for completeness.Graded items WeightingUI/UX Design and Stuffing for Your Web1. Your website layout, hierarchy of navigation, links, information put in theweb, graphics, and styling20%Coding and Implementation2. Client-side DevelopmentFunctionality:- Input validation- Partial update of the page via Ajax calls- Implementation of Responsive Web Design (RWD) adapt to screen sizesusing fluid grids, media queries and flexible images or media(Technologies involved: HTML5, CSS3, JavaScript or JQuery)20%3. 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%4. Database implementation 10%Report and Demonstration5. Technical report summarizing your teams project work 10%6. Oral presentation/demo (to be done at week 14) 10%Bonus Part7. Deployment to a real web server environment +10% (max)8. Adopting an MVC design Pattern or an MVC framework +10% (max)9. 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,CommunityCollegeofCityUniversityAST20201 Web Programming7Rubric for Assessment Item 1 (UI/UX Design and Stuffing for Your Web)Beginning Developing Accomplished ExemplaryLayout/Design The pages areunattractive. Textis difficult to read.The backgroundsare distracting.The pages appearbusy or boring.Text may bedifficult to read.The backgroundsare somewhatdistracting.The pages are eyecatchingandattractive. Text iseasy to read. Thebackgrounds aresubtle andappropriate.The pages are wellorganized withtables. Text spacingand alignment makereading easy. Thebackgroundsenhance the page.Graphics There are nophotos, icons or clipart or they areinappropriate or oflow quality.Photos are blurry orfuzzy; icons andclip art do not fitwith the topic. Toomany pictures makethe download timeslow.Photos, icons, andclip art areappropriate, of highquality, anddownload fairlyquickly.Photos, icons, andClip art are usedcreatively and mayfollow a theme.Information Information ispoorly written,inaccurate, orincomplete.Information couldbe better writtenand too muchinformation is givenin each section.Information is wellwritten andinteresting to readand is presented inshort sections.Information iscreatively writtenand cleverlypresented.Navigation/Links The user maybecome lost or linksmay be missing ornot working.The user maybecome confusedwhen navigatingbetween pages.Some links may notwork.Links are consistentand easy to find sothat the user caneasily navigate backand forth throughpages.Links are createdWith images andicons to enhancethe text links.Rubric for Assessment Item 2 (Client-side Development)Beginning Developing Accomplished ExemplaryClient-sideFunctionality(Response andAjax-based)The visual design isof a poor standardand can only beviewed in oneviewport, withmany issuespresent. Thenavigation systemis poor andinteractions providea poor experienceoverall. Ajax is notused.The visual design isof a satisfactorystandard andresponsive acrosstwo viewports, withsome issuespresent. Thenavigation systemis appropriate andinteractions providea satisfactoryexperience overall.Ajax is not used, orused but resultingsome issues.The visual design isof a good standardand responsiveacross multipleviewports, withsome minor issues.The navigationsystem isappropriate andinteractions providea good experienceoverall. Ajax isused for partialupdate, butsometimesreloading the fullpage.The visual design ishighly professionaland responsiveacross multipleviewports. Aresponsivenavigation isincorporated andthought has beenput into how theuser interacts withapplication toprovide an excellentexperience. Ajax isused intensivelyinstead of reloadingthe full page often.Client-sideDevelopmentQuality(HTML / CSS /JS / jQuery)HTML, CSS renderinappropriately inthe browser. Eventhandling gets to bewrong.HTML and CSSsometimes causeissues whenrendering in thebrowser.HTML, CSS and JScode are mostlywell written andpartiallydocumented.HTML, CSS, andJS code are all wellwritten and fullydocumented.DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversityAST20201 Web Programming8Rubric for Assessment Item 3 (Server-side Development)Beginning Developing Accomplished ExemplaryServer-sideFunctionality(Browse /Search / Order /Comment /User session(shopping cart) /CRUD for adminof DB objects)Minimal effort.Both buyer andsellerfunctionalities donot work well.Buyer can browseand sellers can postproducts.Transactions can beplaced.Buyer can browseand search forproducts; sellerscan perform CRUDon products.Platform admin canperform CRUD onproduct categories.Transactions can beplaced.Buyer can browseand search forproducts; usersession andshopping cart areworking; sellers canperform CRUD onproducts. Platformadmin can performCRUD on productcategories.Transactions can beplaced.Server-sideDevelopment(JSP / Servlets /JavaBeans)The Web app workswith a number oferrors. An attemptis made at oneclient serverinteraction, whichwill partially work.Code could bebetter written.The Web app workswith a few errors,and demonstrates atleast one clientserver interaction.Code is mostlywritten correctly,but a few minorissues are visiblewhen it runs.The Web app workswith only minorerrors, anddemonstratesmultiple clientserver interactions.Code is written andorganisedappropriately and ismostly commented.The Web app workswithout any majorerrors, anddemonstratesmultiple clientserver interactionsappropriate to thescenario. Code iswritten andorganisedprofessionally andis fully commented. Your web apps correctness will be checked; one example is about the correctness of updating the stock of aproduct; suppose multiple clients are buying the same product concurrently, is its stock in the database deductedcorrectly?请加QQ：99515681 或邮箱：99515681@qq.com WX：codehelp
“
添加老师微信回复‘’官网 辅导‘’获取专业老师帮助，或点击联系老师1对1在线指导。
