SE 352/452 Object Oriented Enterprise Computing
§ Administrative
§ Keys from last meeting
§ § Mockup
§ HTML and CSS § Midterm
§ Before next class
12 Factor App Concept (https://12factor.net/dev-prod-parity)
DB and app in same process
DB and app in separate process
DB and app in separate machine
App localhost
App localhost
§ Website: https://www.postgresql.org/ § PostgreSQL: Downloads
§ Open source database from UC Berkeley been around for over 30 years
§ Website: https://www.docker.com/ §Download: https://www.docker.com/get-started
§ Environment to keep environment configuration consistent
§ Download and install
§ From Database subdirectory of the SE452 Github run
§ docker-compose up –d
Option 1 – in memory
Option 3 – multi machine
Option 2 – same machine
§ No fixed schema or formal structure § Scales horizontally (or vertically)
§ Avoid joins
ACID – SQL/RDBMS
§ Strong consistency § Isolation
§ Focus on “commit” § Nested transactions § Pessimistic
§ Difficult to change
BASE – NoSQL
§ Weak consistency – stale data OK § Best effort
§ Approximate answer OK
§ Optimistic
§ Easier evolution § Faster
Option 1 – in memory
Option 3 – multi machine
https://cloud.mongodb.com/
Option 2 – same machine
Intent is to ensure one understands the general layout and flow of the application Before one begins actual development
https: //moqups. com/
https: //app. moqups. com/txs6fvCr3m/view?ui=0
§ Mark up for web content used to show content and collect information displayed by browser that incorporates styles (CSS) and scripting language (JavaScript)
§ Maintained by WHATWG as a living standard and Requirements facilitated by W3C
§ Segmented into xml elements that consists of tags and attributes
§ HTML tags are not case sensitive:
means the same as
§ HTML5 standard does not require lowercase tags, recommends lowercase in HTML
§ https://hostingcanada.org/html-cheat-sheet/
§ Base § Link § Meta
Some HTML elements will display correctly, even if you forget the end tag
This example works in all browsers because the closing tag is considered optional.
Never rely on this. It might produce unexpected results and/or errors if you forget the end tag.
!!! This will be KEY when it comes to Angular !!!
§ Attributes provide additional information about HTML elements § All HTML elements can have attributes
§ Attributes provide additional information about an element
§ Attributes are always specified in the start tag
§ Attributes usually come in name/value pairs like: name=”value”
§ User’s visible area of the page
§ Reference
§ http://www.w3schools.com/css/css_rwd_viewport.asp
§ https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Where to send put
• https://www.w3schools.com/html/html_forms.asp • https://www.wufoo.com/html5/
§ CSS (Cascading Style Sheets) allows us to apply formatting and styling to the HTML that builds our web pages.
§ CSS can control many elements of our web pages: colors, fonts, alignment, borders, backgrounds, spacing, margins, and much more.
§ CSS works in conjunction with HTML.
§ An HTML file (or multiple files) links to a CSS file (or multiple CSS files) and when the web browser displays the page, it references the CSS file(s) to determine how to display the content.
§ HTML elements are marked with “IDs” and “classes,” which are defined in the CSS file – this is how the browser knows which styles belong where. Each element type (
, ![]()
,
,
§ IDs and classes are defined by the person writing the code – there are no default IDs and classes.
§ Within each CSS element, styles are added that apply to that particular selector:
color: green;
} This style would apply to anything within HTML
tags; the text inside the tags would be green.
§ The styles for each element, ID, or class used on an HTML page are defined in a CSS document.
} Elements are declared with the element (HTML) tag; styles for the element are wrapped with curly brackets:
} IDs are declared with a pound sign and the ID name; styles for the ID are wrapped with curly brackets:
#title { }
} Classes are declared with a period and the class name; styles for the class are wrapped with curly brackets:
.bodytext { }
§ CSS must be used in conjunction with HTML to be effective. CSS files can be linked to HTML documents with a bit of code in the
tags of an HTML file: } CSS can also be written “in line,” within HTML code, but it’s preferable to include an external style sheet:Lorem ipsum…
§ We’ve added IDs and classes to our HTML file, but we need to define what those IDs and classes will do.
§ How will each class or ID change the appearance of that HTML element? § This is where CSS comes in!
§ By defining the styles that go with each attribute/class/ID, we have complete control over the look of our content.
§ First, let’s add a simple style to .bordered:
.bordered {
width: 300px;
} Now, any HTML element that includes class=“bordered” will be 300 pixels wide.
Each style ends with a semicolon.
§ Let’s add a border to that image that has class=“bordered”. § The “border” style requires some additional attributes.
.bordered {
width: 300px;
border: 3px solid #000000; }
The border
should be solid. (Other possible values include dotted and dashed. )
Tells the browser “I want a border around this element.”
The border should be 3 pixels wide.
The border should be black
(defined by hexadecimal color code).
§ Because every computer has a different set of fonts installed by default, we can’t know for sure if our visitors will have a certain font on their computer.
§ If we design our site using a certain font, and a visitor doesn’t have that font installed, our site will not look as we intended it to.
§ Luckily, there is a set of “web safe” fonts that most computers have. Choosing from these fonts will make our site look (almost) the same on any computer.
§ Web safe fonts include: Times New Roman, Georgia, Arial, Tahoma, Verdana. More info: http://www.w3schools.com/cssref/css_websafe_fonts.asp
§ In CSS, the font-family style often includes a list of a few fonts, so that there is a “fallback” option in case the font we specify first isn’t available.
§ We may want the same styles to apply to more than one element in our site. Combining our styles can help us do this so that we don’t have to duplicate our CSS code:
Adding additional, comma- separated elements, classes, or IDs allows the same styles to be used in more than one place.
font-family: “Arial”, sans-serif; }
§ Mozilla (https://developer.mozilla.org/en-US/docs/Learn) § W3School (https://www.w3schools.com/)
§ Lecture 1 – Architecture
§ physical vs logical, critical components, and whys and why not § 12 Factors
§ Lecture 2 – SQL § JPA
§ Demo code
§ Lecture 3 – NoSQL
§ Relationships within SQL (inheritance and one to many) § Different types of NoSQL
§ Demo code
§ Lecture 4 – Client Web UI § Mockup
§ HTML § CSS
Not included
§ IDE setups (Netbeans/Eclipse/Maven)
§ Diagrams such as Use Case/Sequence (couldn’t work out the logistics using D2L)
Description
One codebase tracked in revision control, many deploys
Dependencies
Explicitly declare and isolate dependencies
Configuration
Store configuration in the environment
Backing Services
Track backing services as attached resource
Build, release, run
Strictly separate build and run stages
Execute the app as one or more stateless processes
Port binding
Export services via port binding
Concurrency
Scale out via the process model
Disposability
Maximize robustness with fast startup and graceful shutdown
Dev/prod parity
Keep development, staging, and production as similar as possible
Treat logs as event streams
Admin processes
Run admin/management tasks as one-off processes
§ D2L Quiz
§ From D2L, select More and Quizzes
§ Format: Long answer
§ Short code snippets. NOT entire application
§ There may be need for code snippets but not entire programs
§ Rationale for decisions MUST be explained. Not just the answers
§ Available on Apr 22, 2021 1:00 AM until Apr 26, 2021 11:30 PM CST § Duration: 180 min (no break/pause option)
§ No meeting next week
§ Finish midterm
§ Prepare for Milestone 2 presentation – Odd group (1, 3, 5, 7, 9)