Div id
A <div> is an example of a block-level element, it keeps its inner workings contained as a discrete piece. <p> tags do much the same. id's, on the other hand, are unique names for page elements. ... </div> . id's don't just apply to divs, they can apply to any HTML element in the original document.
templates/index.html
<!DOCTYPE html>
Tells browser HTML is coming
<html lang="en">
The HTML lang attribute is used to identify the language of text content on the web.
<head>
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. Metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information.
<title>CRUD Example</title>
element defines the document's title that is shown in a browser's title bar or a page's tab. I
<meta charset="utf-8">
The charset attribute specifies the character encoding for the HTML document.
The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world!
<meta name="viewport" content="width=device-width, initial-scale=1">
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
<link rel="stylesheet" href="/static/style.css">
The rel attribute defines the relationship that the linked resource has to the document from which it's referenced. In most cases, this resource will simply be “ stylesheet “, which means, not surprisingly, “the referenced document is a style sheet
</head> end heading area
<body>
element contains the entire content of a webpage. It must be the second element inside of the parent <html> element, following only the <head>
{# NavBar #}
<nav class="navbar">
<a class="navbar-brand" href="/">Customers</a>
<a href="/create">Add Customer</a>
</nav>
A navigation bar is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in file browsers, web browsers and as a design element of some web sites.
A "navbar" is an area on a page that contains navigation components (links, buttons, etc) for getting to other pages of the website. A "nav" is an HTML element that is normally used to enclose other elements related to navigation.
The class is an attribute which specifies one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.
A hyperlink, or simply a link, is a reference to data that the user can follow by clicking or tapping. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. The text that is linked from is called anchor text.
{# Customer List #}
<section>
<h2>Customers</h2>
The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
<ul>
{# Customer.name is the item in list we display for selection #}
{% for customer in customers %}
<li><a href="/read/{{ customer.Name }}">{{ customer.Name }}</a></li>
{% else %}
<li>You have no customers yet. Click <a href="/create">here</a> or "Add Customer" in the navbar to create one.</li>
{% endfor %}
The {% for %} and {% endfor %} tags will loop over each value in a collection. A collection can be either an array or an object implementing the Traversable interface.
</ul>
</section>
</body>
</html>
===========================================================
Now create another file under templates called create
templates/create.html
===========================================================
<!DOCTYPE html>
<html lang="en">
<head>
<title>CRUD Example - Create Customer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
{# NavBar #}
<nav class="navbar">
<a class="navbar-brand" href="/">Customers</a>
</nav>
{# Create user form #}
<section>
<form method="post" action="/create">
<div>
<label for="Name">Name</label>
<input type="text" class="form-control" id="Name" name="Name">
<br>
<small class="form-text text-muted">This is the primary key for the customer. It must be unique.</small>
</div>
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id . Other usage notes: The form control that the label is labeling is called the labeled control of the label element.5
<br>
<div>
<label for="address">Address</label>
<textarea class="form-control" id="address" name="address" rows="3"></textarea>
</div>
<br>
<div>
<label for="address_type">Address Type</label>
<select class="form-control" id="address_type" name="address_type">
It's a class defined by Bootstrap. All textual <input> , <textarea> , and <select> elements with . form-control are set to width: 100%; by default. So essentially what it's doing is lengthening the text-input area to cover the width of the screen that it's viewed on, or atleast the window that the form is in.
<option value="personal" selected>Personal</option>
<option value="commercial">Commercial</option>
</select>
</div>
<br>
<div>
<label for="address">Instructions</label>
<textarea class="form-control" id="instructions" name="instructions" rows="5"></textarea>
</div>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</section>
</body>
</html>
===========================================================
templates/customer.html
===========================================================
<!DOCTYPE html>
<html lang="en">
<head>
<title>CRUD Example - Customer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
{# NavBar #}
<nav class="navbar">
<a class="navbar-brand" href="/">Customers</a>
<a href="/create">Add Customer</a>
</nav>
{# Customer Options #}
<section>
<div class="container">
<ul>
<li><a href="/update/{{ name }}">Update</a></li>
<li><a href="/delete/{{ name }}">Delete</a></li>
</ul>
</div>
</section>
{# Customer info #}
<section>
Name: {{ name }} <br>
Address: {{ address }} <br>
Address Type: {{ address_type }} <br>
Instructions: {{ instructions }} <br>
Translated : {{ transinstructions }}
</section>
</body>
</html>
===========================================================
templates/update.html
===========================================================
<!DOCTYPE html>
<html lang="en">
<head>
<title>CRUD Example - Update Customer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
{# NavBar #}
<nav class="navbar">
<a class="navbar-brand" href="/">Customers</a>
<a href="/create">Add Customer</a>
</nav>
{# Update user form #}
<section>
<form method="post" action="/update/{{ name }}">
<div>
<label for="Name">Name</label>
<input type="text" class="form-control" id="Name" name="Name" disabled value="{{ name }}">
<br>
<small class="form-text text-muted">This is the primary key for the customer. It should not be changed.</small>
</div>
<br>
<div>
<label for="address">Address</label>
<textarea class="form-control" id="address" name="address" rows="3">{{address}}</textarea>
</div>
<br>
<div>
<label for="address_type">Address Type</label>
<select class="form-control" id="address_type" name="address_type">
<option value="personal" {% if address_type == "personal" %}selected{% endif %}>Personal</option>
<option value="commercial" {% if address_type == "commercial" %}selected{% endif %}>Commercial</option>
</select>
</div>
<br>
<div>
<label for="address">Instructions</label>
<textarea class="form-control" id="instructions" name="instructions" rows="5">{{instructions}}</textarea>
</div>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</section>
</body>
</html>
=========================================================
Now we need to create another directory to hold our style.css file
Create a new folder called static
Highlight the newly created directory
Create a new file called style.css
Cut and paste code below
static/style.css
=========================================================
body {
margin: 0;
}
The margin CSS property sets the margin area on all four sides of an element. It is a shorthand for margin-top , margin-right , margin-bottom , and margin-left
.navbar {
background-color: #DDDDDD;
margin-bottom: 10px;
}
The hexadecimal color code #dddddd / #ddd is a very light shade of gray. In the RGB color model #dddddd is comprised of 86.67% red, 86.67% green and 86.67% blue. In the HSL color space #dddddd has a hue of 0° (degrees), 0% saturation and 87% lightness. This color has an approximate wavelength of 0 nm.
The padding property in CSS defines the innermost portion of the box model, creating space around an element's content, inside of any defined margins and/or borders. Padding values are set using lengths or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is 0 .
.navbar-brand {
font-size: larger;
}
/* <absolute-size> values */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;
/* <relative-size> values */
font-size: smaller;
font-size: larger;
/* <length> values */
font-size: 12px;
font-size: 0.8em;
/* <percentage> values */
font-size: 80%;
section {
max-width: 1200px;
margin: auto;
padding: 8px;
No comments:
Post a Comment