distributed content
TRANSCRIPT
Presentation by
Abdul Azeem (160310737028)
Zahed Shareef (160310737044)
Mohammed Omer (160310737052)
DISTRIBUTED CONTENT
ACCESS ON CLOUD
TOPICS 2
Project Screenshots
Deploying on the Cloud
Conclusion
UML Diagrams
Introduction to Distributed Content
Books
Information Resources
Audio
Media
Distributed Content consists of media content
(namely Media, Information resources and
Books). Distributed Content Access or Digital
Distribution is the delivery
of such content without the use of physical
media, usually over the Internet.
The contents provided include:
DISTRIBUTED CONTENT 3
LIMITATIONS OF EXISTING SYSTEM 4
Inconsistent User-Interface
Hideous navigation
Tedious Checkout Process
Difficulty in Tracking Order
No downloadable products
No Localization options
Lack of sufficient Security
Real-time Visitor Statistics unavailable
Performance Issues
FEATURES OF PROPOSED SYSTEM 4
Distributed Content Access application has been broadly divided into two phases:
• Storefront and
• Backend Administrator
The Features of the Storefront are:
• Feature-rich
• Easy to Use
• Vast Accessibility Options
• Product Search
• Downloadable Products
• Localization
• Responsive Web Design
• Device Friendly
• Search Engine Friendly
• Hassle Free Checkout
• Option for Customers to Create an Account or Continue as a Guest
• Account Settings and User Profile
• Order Summary
• Invoice Print
FEATURES OF PROPOSED SYSTEM 4
The Features of the Backend Administration:
• Products Categories & Attributes
• Stock Management
• Administration Permissions and Users
• Multiple Administrator
• Payment Gateways
• Search Engine Friendly
• Meta Information for Products and Categories
• Catalog Promotions
• Catalog Statistics
• Make or Edit an Order through Admin
• Password Encryption
• Track Visitors
• View Customer Profiles
• Track Orders and Sales
UML DIAGRAMS
4
ENTITY RELATIONSHIP DIAGRAM 8
CLASS DIAGRAM 9
USE CASE DIAGRAMS 10
USE CASE DIAGRAMS 6
USE CASE DIAGRAMS 12
USE CASE DIAGRAMS 13
USE CASE DIAGRAMS 14
ACTIVITY DIAGRAMS 15
ACTIVITY DIAGRAMS 16
ACTIVITY DIAGRAMS 17
ACTIVITY DIAGRAMS 18
STATE CHART DIAGRAMS 19
STATE CHART DIAGRAMS 20
PACKAGE DIAGRAM 21
COMPONENT DIAGRAM 22
SEQUENCE DIAGRAMS 23
SEQUENCE DIAGRAMS 24
DEPLOYING ON
THE CLOUD
WHAT IS CLOUD? 26
Instead of storing all files and running all
programs on your own computer, Cloud
Computing allows you to store files and run
programs on powerful server computers
that can be controlled and accessedremotely over the Internet.
ATTRIBUTES OF CLOUD 27
Scalability High Availability Interoperability
SERVICES OFFERED BY CLOUD 28
Platform as a Service (PaaS): Platform as a Service is a way to rent
hardware, operating systems, storage and network capacity over the Internet.
The service delivery model allows the customer to rent virtualized servers
and associated services for running applications
• Software as a service (SaaS)
• Platform as a service (PaaS)
• Infrastructure as a service (IaaS)
Advantages from PaaS: Each platform component is provided as a service
No upfront investment in servers.
No software licensing.
No software updates for customers.
Global availability.
WELCOME TO PaaS 29
PROJECT DEPLOYMENT 30
PROJECT DEPLOYMENT 31
PROJECT DEPLOYMENT 32
SCREENSHOTS
PROJECT
PSEUDO CODE FOR DATABASE ACCESS 34
PSEUDO CODE:public class DB_Conn {
private String database=“DB_name", username = “user", password = “********";
private Connection con;
public Connection getConnection() throws SQLException, ClassNotFoundException {
Class.forName("com.mysql.jdbc.Driver");
con=DriverManager.getConnection("jdbc:mysql://localhost:3306/"+database+"",""+username+"",""+
password+"");
return con;
}
HOMEPAGE 35
PSEUDO CODE:if (session.getAttribute("user") ==
null ){// new user, show signup
%>
<jsp:include page=
"includesPage/_joinNow.jsp">
</jsp:include>
<% }else { %>
<jsp:include page=
"includesPage/_loggedIn.jsp">
</jsp:include>
<% } %>
SIGNUP 36
LOGIN 37
ADMINISTRATOR LOGIN 38
BOOK CATALOG 39
PSEUDO CODE:<%
if (session.getAttribute("admin")
!= null){
%>
<a href=
"admin_manageProduct.jsp?pid=
<%= product_id %>">
<div class="button">Edit</div>
</a>
<%
}
%>
BOOK INFORMATION 40
PRODUCT CART 41
PSEUDO CODE:
id = Integer.parseInt(sid);
boolean b = cart.addProduct(id);
if (b == true) {
out.println("<td>"+ id +"</td>"+
"<td>" +
cart.getProductName(id) +
"</td>" + "<td>" +"Rs. "+
cart.getProductPrice(id)+"</td>")
;
} else {
out.println("No Product to Add");
}
PRODUCT CHECKOUT 42
PSEUDO CODE:<script type="text/javascript">
$(document).ready(function (){
$('#useInfo').click(function (){
var userName = $('#userName').text();
var mobile = $('#mobile').text();
var address = $('#useAddress').text();
$('.name').attr('value', userName);
$('.address').attr('value', address);
$('.mobile').attr('value', mobile);
});
});
</script>
ORDER SUMMARY 43
PRINT INVOICE 44
USER PROFILE 45
ADMINISTRATOR DASHBOARD 46
CONTACT PAGE 47
PSEUDO CODE:/* Small screens (default) */
html { font-size: 100%; }
/* Medium screens */
@media (min-width: 768px) {
html { font-size: 112%; }
}
/* Large screens*/
@media (min-width: 991px) {
html { font-size: 120%; }
}
HELP PAGE 48
RESPONSIVE
RESPONSIBLY
GUIDE TO RESPONSIVE DESIGN 50
Responsive Architectures measure actual environmental
conditions to enable buildings to adapt their form, shape,
colour or character responsively.
Fluid grids, flexible media, mobile first and media queries are
the four technical ingredients for responsive web design.
Add the Viewport Meta Tag. Place in the <head> of the HTML. This
enables use of media queries for cross-device layouts.<meta name="viewport" content="width=device-width, initial-scale=1">
BOX-SIZING MODEL 51
What was once a bug is now a widely used CSS property. It basically means you can choose
whether or not to include borders and padding in the width of your content. When box-sizing:
border-box; is specified for an element, any padding or border of the element is drawn inside the
specified width and height
Without box-sizing: border-box With box-sizing: border-box
ISSUES WITH RESPONSIVE DESIGN 52
1. One (image) size doesn’t fit all- unnecessary downloads on small viewports or bad quality on large ones
- real-time image resizing is cpu and memory intensive
2. Non viewable assets are downloaded anyway (display: none is not
download: none)- unnecessary downloads
3. media-queries will not remove unnecessary code- unnecessary downloads of code not suitable for “mobile”
4. media-queries are not supported by older devices- unnecessary downloads
- unpredictable css results
5. Responsive Web App doesn’t have access to device sensors
RESPONSIVE DESIGN SAMPLE 53
REQUIREMENTS
HARDWARE REQUIREMENTS:
Hard Disk: 80GB
Ram 2GB
Processor Intel Dual Core 2.6GHz
54
SOFTWARE REQUIREMENTS:
IDE: NetBeans IDE 7.4, Brackets Sprint 37
TECHNOLOGIES: HTML5, CSS3, Java 6, JavaScript
The future possibilities of this project are mentioned below:
• Extensions as Add-on Modules
• Serving the right Media based on User Device
• Interaction with other users
• Recommendation based on Social Media interactions
FUTURE ENHANCEMENT 55
CONCLUSION 56
Highly Efficient Web Application GUI
Meets the Current User Requirements
Uses latest technology to bring forth a uniform and
responsive user-interface
Cloud has laid the foundation for future growth
Cost savings
Technological, financial, organizational benefits
57