Scribd
Upload
26 views81 pages

Django

Uploaded by

hello.bhartipandit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views81 pages

Django

Uploaded by

hello.bhartipandit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 81

1.

Gives interface for managing data


2. Extracts databse
3. Provides user authemtication

1. Individual apps and their entities for E commerce app

HTML
Important HTML tags

1. Any words with brackets are tags.


2. Content between tags is called element
3. No H7 exists
1. Don’t use more than 1 H1 in one page
2. Don’t skip levels in heading

1. Void tags don’t have content in them ex – horizontal rule element(horizontal line), <br />
(breaks in the line)

1. Don’t use break if you want new paragraph


2. HTML 5 is ignoring ending backslash

1. For nested list – indentation is good


2. Anchor element - <a>
3. Global attributes – each HTML element has access to (ex:dragable)
4. Main component of <img> tag is src attribute – gives location of the image
5. Img is void element – self closing tag

1. Absolute File Path – Path relative to the root of computer.(root means C, D drive)
2. Relative file path – relative where we are currently in the folder structure
1. Special characters are important - ./ means search in the current directory ../ means
search one directory up.
1. HTML Boilerplate – structure of HTML (we start off html with this)
2. Doctype – tells the browser the version of html
3. Content between <html> is root which contains all the related tags
4. <head> helps browser render html correctly but it doesn’t include any content
5. <meta> tag helps to enable any symbol in the content (ex some let’s emoji to be shown,
others not)
6. Vs code - !+enter
7. Meta also tells how to display web app when displaying on a screen

CSS
1. Selectors – It is the part that selects the HTML in order to apply the CSS
2. Element selector – targets particular html tag and selects all those tags in the html file
3. Class – attribute that we can add to any html tag
4. Class is useful when you don’t want to select a particular type of html element
5. Diff between id and class – class can be applied to multiple elements, id should be applied 1
element in a html file
6.
Types of CSS

1. Inline – in the same line as HTML tag


2. Inline is useful when you want to apply styling to single element
3. Internal css is done inside <style> tag
4. Internal is useful to apply CSS to only 1 document
5. External is linked through <link> tag
1. Select all p tag with attribute selector
2. Classes can be associated to multiple elements but id is associated to single
3. Selectors selects the html element to apply the style

We can also use attribute selectors in the above way


1. Above are font size units – 1 px = 0.25 mm, 1 pt(point) = 0.35 mm, em is relative to parent,
rem is relative to root(html tag)

Above can be values of font weight


1. 2nd one is backup or generic font
2. Font with spaces should be in quotes

1. Cross out css code in developer tool indicate that you have overridden few predefined css
rules

1. When we change height width of any element, it pushes another object on the page
2. Padding, margin, border makes a box model
3. Every element is box in itself
4. Height width can be in percentages
Above is the border property of element

1. Height width of elemtn does not change upon adding border

1. Above is also possible


1. Border width can take max 4 values, if 2 is given then it sets in top/bottom and left/right
fashion

Padding pushes border ouside of the element and adds extra space between element and border.
Does not change the h, w of the element
Margin is outside of the border

1. Padding, margin, border all takes width property in the same way(4 values or 2)
2. <div> acts as our own box instead of individual element’s box and we can group elements
together to provide same design for some content

Cascade means user will see only the most important rule applied to an element

1. Inline>internal>external
2. The lowest rule is most important
3. Specificity – most important is one which is most specific selector (id>element element
attribute>class>element)
4. !important – is a keyword to make any rule most important in css
5. We can add mutilple classes to an element with space between them
6. In selectors – it looks for class and then any descendants in that class
1. We can apply styles to group using comma separated group of selectors
1. We can select direct descendant of a parent through > .
2. Child is the direct child of the parent

1. Above is a descendant selector – any element inside the bracket of ancestor

1. Chaiing is used for some specificity – there is no space between selectors and applies to any
element that have all the selectors mentioned
2. Element name shuld come first if you want to use it in selectors
1. We can combine combinors

Positioning

1. Static – each item flows as it would in HTML(default positioning)

1. Position gets set relative to default position


1. Relative has attributes left and top which moves the below image from it’s default position

1. This applies when nearest positioned ancestor have position as relative and the element has
absolute
1. Z index – tells which element will go on top. The one with higher z value goes on the top
2. Default is 0 you can make it -1 to move it behind

1. Fixed positioning is relative to browser window and if you move page up and down it
remains fixed unlike absolute positioning

1. p tag is block element – takes up entire line in the web page


2. span is inline element – it doesn’t take the entire line and starts from where it ended earlier
3. display property can have 3 values – block, inline, inline-block
4. Inline elemets – we can’t set height and weith
5. Inline-block elment – it allows to set h and w and allows to have element that goes in same
line
6. None value – makes the element disapper

1. Float is used to wrap text around an element

2. To free other texts like footer from wrapping around image – we use clear in css

Ways to make css responsive to the screen size:


1. Media query – look in this css for the screen below 600 px
1. Max width in media queries
2. Alternatively we can use min-width

1. We can combine these

Flexbox

1. Originally concept of display came from newspaper

1. Earlier html was used for the display as can be seen from above image that table is being
used to display 3 cards
2. Table is still used in modern design but only when we really want to display a table data not
for designing purpose
We

1. After table they started using something like inline block


2. But this has issue like their top is not aligned

1. Then we switched to absolute positioning but this complex like other component that we
add may not be absolute
2. Next we could use float and clear property
3. Float is good if we want to wrap text around image but should not be used for layout
1. Above is how we apply flexbox – just put all your code in div with class container and apply
display as flex
2. Display:flex is very different from inline, block, inline-block and there is no connection
between them
3. In this we give flex a little control to layout our content in reasonable way
4. When we enclose content inside flex container then all the default styling such as block for
div, inline for span gets ignored
5. Inside flexbox styling is according to the content and it tried put things in one line
6. We can use gap property to set gap between elements. We can also make it 1 rem

1. When we set any container as flex – it is also a block element


1. We can also set it as inline-flex – it will act as flex but allow another element to go beside it
2. Inline flex will occupy only the width of content and make space even if no other element is
there

3. In flex – by default it keeps stacking all the content in a single row


4. When we see flex-direction:row (we are setting the main axis from left to right)
5. Cross-axis – perpendicular to the main-axis
6. When we set flex-direction:column; - elements go from top to bottom
1. Relevance of main-axis is that other property use ths as reference ex. – flex-basis increases
the width of elements in the direction of main-axis

In Flexbox we have consider whether the property is going to child or parent(the container)

1. Order property of child is 0 by default


2. Since green color has order 10 which is greatest, it moves to the extreme right
3. When box gets full still default behavious of flex pushes other elements and put new
element in the same row
4. Flex-wrap: wrap; - pushes any element down which does fit the container
5. It is a property of parent itself
1. Justify-content – property of parent
2. Flex-start moves the content to start from left
3. Flex-end moves to right
4. Justify-content: center; - centres all the content

1. Using above we use all the space in the flex block and create some gap between elements
1. Justify-content is used to set the distribution across main axis
2. Align-items is also property of parent
3. It sets distribution along cross axis
4. Height of box should be bigger for this work so height is used to set height of box
5. Valyes are similar – flex-start, flex-end, center etc but flex-wrap should be nowrap

1. If we want to align only one element in some other part then we set property align-self
property of only that element
2. Another property align-content works only if flex-wrap is set to wrap – It also have same
values
3. Generally flex box makes the elements smaller when we squeeze a page
4. The principle how it works is above
5. First looks at min-width, then flex-basis, then width which we generally define in css. At last
looks at the width of content itself and as page squeezes the word wraps to make smallest
content width
6. After min content width is reached – elemets go out of the page and content is not visible
anymore

1. Suppose we set width of each element in the flexbox to 100 px then code respects the
crtieria until page is not squeezed, but when it squeezes the individual element width will
become smaller and non uniform according to the content
1. In presence of flex-basis width gets ignored completely
2. If nothing mentioned then initially the boxes will be according to length of content putting
all conent in a line
3. Max-width is given importance over flex-basis unless flex-basis is less than max-width
4. Min-width is given importance over flex-basis unless flex-basis is bigger than it

1. In above case when we shrink the window, boxes size inside flex will not shrink at all

1. In above case initially the box sizes are 100 but when there is more space for them to grow
then they become bigger to fi the size of flexbox
2. Size won’t go below flex-basis
3. In opposite situation – it won’t grow but it will shrink below flex-basis
4. By default flex-basis is auto which means box sizes vary according the content length
5. Sometimes these 3 are written in shorthand – flex: 1 1 0; grow, shrink, basis
6. Flex: 1; means the same as above

Grid
1. It’s hard to create layout like this using flexbox
2. Flexbox helps to align content in 1D
3. Grid is for 2D layout
4. We generally use combination of these- flex inside one section in the grid
5. Sometimes we have grid inside flexbox

1. Flex and grid behaves differently – grid natural tendency is to grid contents in row/column
when page is minimized, flex does not do that
1. The above is how we create a grid. Grid-template-column means the ratio in which the size
of columns should be. Gap is gap b/w the rows and columns
2. Grid tries to fit the width of container to whole screen but does not fit the height to the
screen, height is fit only to the content

1. Above is how to give sizes of rows and columns


2. The behaviour of fixing the sizes – the page is not responsive
3. Even if we make sizes in rem it isn’t responsive
4. Grid-template: 100px 200px / 400px 800px – another way to specify both row and column
sizes in one line

1. The above code is another way to define widths


2. For column 1st is 200px and another resizes to fit the screen due to auto
3. For row 1st is 100px and another fits the content of the row due to the value auto
4. This makes grid responsive
5. Fractional grid is also responsive but fractional ratio is mentained upon resizing or adding
content

1. Sometimes we want to define how our page should be responsive especially in width – here
the 2nd column can take min and max width accordingly

1. Above code repeats 200px 2 times, and 100px 3 times

1. Above code is when there isn’t sufficient rows/columns


1. When we don’t define enough sizes – the last element is added with the column size and
row size according to the content width

1. In this case we defined sizes for predefined rows/columns but the grid-auto-rows is used
when any additional row is added
1. Items inside grid – grid items
2. Rows, columns – tracks
3. Smalles unit in grid – grid cell(between the intersection of grids)
4. We can create grid items by combining multiple grid cells
5. Grid lines – lines that separates tracks. It has only gap property to set it’s width
6. Container takes the cotent height by default but we can set height property in terms of
vh(viewport) .container{
Height:100vh}
1. Grid-column as span 2 means it bridges the gap between 2 columns

1. Grid-column-start is 2 means cowboy div starts from column 2 and ends at 4


2. Grid-column-end as -1 means last column (rightmost line in the grid)
3. -2, -3 gets confusing
4. Grid-start and end can be reversed – it will give same result
5. We can define only grid-column which means it starts from starting and ends at the
mentioned value
6. Similary grid-row-start and end exists
7. Second div comes after 1st and positions to right of cowboy – but if we make it’s order as 1 –
this shifts it to either rightmost or lowermost portion
8. Elements goes from left to right then top to bottom in the order or the order

1. We can also define all the coordinates of cowboy to make it go below and also shorthand for
it i.e grid-area (grid-row-start, grid-column-start, grid-row-end, grid-column-end)
2. But once we use grid area for one element we will have to use it for all other elements to
behave as expected
3. Grid lets us overlap items on top of other items

Bootstrap

1. One of many external layout system


2. Contains pre made css file
3. It has 12 column layout system built on top of flexbox

1. Above we are using pre-built css in our project and including it in our tags.
2. 2 popular external framework – bootstrap, foundation
3. Native css – grid, flex
4. Drawback of framework is that there is a lot of css class in the html itself which makes it look
less clean, it also takes our control to change many styles of elements
5. For very basic or very complex website where you need too much control of the css – do not
use bootstrap
1. We can add cdn (content delivery network) link in the head tag and the script tag just above
closing body tag.
2. Cdn – allows users to download the package from the nearest server available to the users
3. If you want to add link to your custom css add it below the link for bootstrap – you can
override any style that comes from bootstrap

1. 12 column system is made of 3 components


2. 1st we need container div, inside it we need row div which contains items(columns)
3. If we have 6 columns inside the row – bootstrap gives them equal spacing and they cover
the full screen
1. Bootstrap is responsive
2. Container-md(container-medium) – means container will reach it’s 100% on given size of
screen

1. Column sizes can also be specified using the col and number. – we can give class to each
columns
1. Bootstrap has it’s breakpoints

1. This means give columns the abve sizes when screen is above small, below small all
elements will get a default of 100% screen size

1. We can have multiple breakpoints for a div(column)


2. Ex – above image says to take col-lg-4 – 4/12 screen for large screen, col-md-8 – 8/12 for
screen medium or larger

1. Leaving col means it will adjust to fit the screen size

1. Btn-primary class gives a blue color to the button, similarly other classes
2. Bootstrap navbar is also useful component
3. Bootstrap provides icon which you can use directly(ex- download symbol)
4. Mt-5 means – margin top as 5
5. Bootstrap also provides spacing property
6. My-3 means – margin in y axis as 3

1. To apply dark mode to your website – use data-bs-theme property

JavaScript

1. Semicolon is like full stop in English.


2. We can use both single/double quotes, double is preferred when writing strings
3. Data types – string, number, Boolean(true, false)
4. Var is new container or box to hold a value
5. When we assign new value to var it points to same box
6. CamelCase – start with lower case but subsequent word is capitalized (myName)
7. Only 2 special characters are allowed in variable name - $, _
8. Can’t start name with numbers
9. + concatenates strings in js
10. String.length gives length of string
11. // - commenting in js
12. /* - multiple comment

1. String.slice(1,2) – give letters of stings starting index 1 upto 2 but not including 2 (gives letter
at index 1)
2. Word.toUpperCase() – to change every character to uppercase
1. Division in js
2. 6%4 = 2 (remainder)

1. We can write x++ or x—to increment or decreament x


2. X += 2/ X = X + 2 – increments value of x by 2
3. Same works for * , / , -

1. Value of x gets assigned to y first and then value of x increments (4)


2. We don’t need ; at the end of function declaration

Functions in javascript
1. Random num generator – it will be less than 1
2. To get random num between 1 and 6 – (6*math.random()) + 1

Between 1 and 6
Comparators

1. Combining comparators

1. Include method of array – gives Boolean(t/f) as output


2. Push adds value to the end of the array
3. .pop() – removes the last element of the array
1. If else statement order is important

While loop

For loop

1. Similar to while just makes it easier for programmers to writes


2. Value is incremented before closing bracket of for loop

DOM
1. We can use inline JS

1. Internal JS inside the script tag – opening and closing


2. We can provide link to external JS in script tag using src
3. We always put script tag for JS above the closing body tag – because in js we point to some
html elements and until the html elements are rendered we can’t point to them.
4. We always keep css link tag in the head because we want it to load first.
5. DOM catalogues a page into individual objects that we can select and manipulate
6. HTML is converted to DOM by browser

Elements are convereted into tree structure


1. Document.firstElementChild. firstElementChild – this is head
2. Document.firstElementChild. lastElementChild – this is body
3. We can store the elements into variable to manipulate them –
Var heading = Document.firstElementChild. lastElementChild. firstElementChild
Heading.innerhtml = “Good Bye”
4. Document.queryselector(“input”) – looks into the etire document to select object that has
selector as “input”

1. Use dot to get the property of an object


2. We can also set property
1. Calling a method on an object

Mehtod and properties of button

1. Difference between mehthod and func is that method is something which can be performed
by an object
1. Document.getElementsByTagName(“li”); - Gives array of elements having li tag
2. Document.getElementsByTagName(“li”)[2] – Indexing to get a particular item from the array
3. Document.getElementsByClassName – works similarly
4. Document.getElementById – selects only single element with given id
5. Document.querySelector – Also returns single element; we can specify tag, id, class inside
this
6. Document.querySelector(“li a”) Document.querySelector(“li.item”) – can use multiple
selectors
7. In queryselector – if multiple tags matches the condition it will return only the 1 st element
8. Document.querySelectorAll(“#list .item”) – Gives list of all elements that matches
9. Document.querySelectorAll(“#list .item”)[2] – gives 3rd element in the list
10. Document.getElementByTagName(“li”).length – gives how many li tags are there in html
11. These selectors will give tag along with content inside it
12. querySelector can be used in complex cases – used more widely

Changing html elements style using Javascript

properties in javascript are not of the same name as css

We can get those name in DOM style

Unlike css value is in the string even if it is a number

Document.querySelector(“button”).backgroundColor = ‘yellow’

Separation of concerns (structure, style, behaviour)

1. Html – structure, css – style, js – behaviour


2. js is used to style when we want change some style on the fly or upon some action
3. classList is a property of every DOM object – gives list of class associated to an element
4. document.querySelector(“button”).classList.add(“invisible”) – we can add class to the
classlist of button and then use the class in css
5. similarly document.querySelector(“button”).classList.remove(“invisible”); toggle – adds or
remove a class

1. innerHTML – gives everything inside html tag including any html tag
2. textContent – gives only the content inside html tag
3. document.querySelector(“h1”).innerHTML = “<em>Hello</em>” - possible

changing Attributes

1. document.querySelector(“a”).attributes – list of attributes associated with the tag


2. document.querySelector(“a”).getAttribute(“href”)
3. document.querySelector(“a”).setattribute(“href”,”www.google.com”)

1. way to add eventlistener to 1st button element


2. adding eventlistener means you are telling element to wait for an action and as it receives
action it will perform a task
Above uses anonymous function

Higher order functions – functions that can take other functions as input

1. Using this we can access the element which triggered the eventlistener.

1. Above is syntax for switch and case


2. We use semicolon unlike curly braces in if statement and end it with break;
3. We can include default in the last and can put console log
1. We can add keypress eventlistener directly to the DOM
2. We can pass event parameter to the function inside eventlistener
3. Event allows us to get details of keypress including which key was pressed
1. They were created so that we can write repetative data in table format (json with attributes
of the object) also reduces error with a consistent attributes

2. Factory in js which can produce objects(bellboy) all day long – constructor


3. Constructor function – name has to be capitalized and not just camelCase

1. Initialize object – create object from that factory


2. Only difference between calling constructor and normal function is the “new” before
constructor

1. Methods – object is able to carry out certain function like move()


2. When we associate function to object – It becomes method

1. We call properties or methods with dot


1. Functions that take function as parameter – Higher order function
2. The function passed in as parameter – Callback function
3. Callback function – It waits for something to happen in this case an event
4. We can give any name in callback function in place of event
5. Callback is not called by us, it is called the object that experiences the event

1. We can use setTimeout func for animation effect

Jquery

Most popular library – jQuery

1. I place of document.querySelector(“h1”) we can write jQuery(“h1”) or $(“h1”)


2. Paste the cdn link of jquery above the script tag for main js in html
3. If you put jquery lib link below main js script tag then it won’t work – since code goes from
top to bottom the main js will execute first and won’t be able to find the jquery lib

4. We have to careful with the jquery cdn since before it is fully loaded the main js might run
and try to access it. To address this we use $(document).ready
5. Replacement for document ready is to just put both the script tags before the closing body
tag and not in the head section.
6. $(“p”) – This will select only one element if only one is present and all of the p tags if many p
are present
1. We can set css property of an element by using css method and then specifying the property
and the value
2. If we have single parameter in the css method then we are getting the property - $
(“h1”).css(“color”)
3. Above method is not good since styling should only be present in css. For this we do the
below

1. Associate css to classes in css and add those classes in js. We can also remove classes
using .removeClass method
2. $(“h1”).hasClass(“margin-50”) – returns true if h1 has the class associated to it

1. Above code replaces the text of each button and the h1 to the given text
2. Replacement of innerHTML is $(“button”).html(“<em>hi</em>”) – we can also write html
tags along with the contents
3. Jquery is itself written in javascript but it has many methods which makes using it simpler

1. Using above code we can get the value of an attribute of an element


1. Above code changes the href property of all a tag to the given value
2. Class is also an attribute of elements
3. $(“h1”).attr(“class”) – gives all the class attached to h1

1. Using above code we can attach eventlistener of click to h1

1. Above is difference b/w how to apply css using normal js and using jquery.
2. In jquery $(“button”) selects all the buttons and we don’t have to loop through it and
attaches click to it.
3. $(document).keypress(function(event) {
Console.log(event.key)
} – gives value of key pressed anywhere in the screen

1. Above code changes content of h1 to the key we press

1. On method gives more flexibility and we can give any event in the parameter as in normal js.
2. We can also create html element using jquery – before, after, append, prepend

1. Preprend attaches new html after the opening tag of h1

1. Append attaches just before the closing tag of h1


2. Before and after attaches before h1 and after respectively
3. $(“button”).remove() – removes all of the buttons

1. Above code produces animation by hiding the h1


2. Toggle – if we click again and again it shows and disappers
3. .fadeOut() – the disappearing will not be sudden
4. Similary .fadeToggle()
5. .slideUp() – slides the element up, slideDown(), slideToggle()
1. Animate can be used to use our own animation in place of pre-built ones
2. In animate we cannot change css property which does not have a numeric value
3. Animate slowly changes the property of an element

1. We can also chain the animations – it will be executed in sequence

Bash Shell (Git)


1. OS is pistachio, actual nut is Kernal
2. Kernal is core of operating system
3. Kernal – Actual programming that interfaces the hardware
4. Shell – User interface
5. Shell 2 types – GUI(Graphical user interface- all file system), CLI(Command line interface)
6. Through user interface we talk to shell
7. We are going to use BASH shell
8. BASH shell CLI interpreter for Unix/Unix like system
9. CLI is faster the GUI
10. Ls – list files and directories
11. Cd – change directory
12. Cd ~ - to go to root directory
13. Cd .. – 1 level up in diecrtory
14. If you want to go to middle in the command – press alt then move your cursor and click
where you want to edit
15. Mkdir Bharti – creates a folder named Bharti
16. Touch text2.txt – creates a new text file
17. rm text2.txt – to remove file
18. pwd – print working directory
19. rm -r Bharti – to remove a directory(folder)

Backend Development
1. All which users can’t see is backend
2. Above are 3 main component of backend
3. Server is a computer, application – all logic which enables web app to function, database –
store and retrieve user data
4. For a live web appl – server should be on 24/7
5. Anything connected to network can act as server
6. Application – logic that runs on that server(how to respond to request from the browser)
7. 404 status – status that we send in response means the request was invalid
8. Usually databse is not a requirement of web app but when data becomes large we need this
9. Rather than just send HTML,CSS,Javascript we want our application to perform some action

1. Above is more complex structure of web application (user sends login request to server,
server looks for the login app, logic app searches for user data in db and matches the user
input from data, if success then server sends a homepage in response)
1. For frontend only javascript is used – angular,react,vue are all framework of js
2. For backend we can use any language and languages have their frameworks – (python –
Django, flask; ruby – rails; js – node)

Nodejs

1. Why Framework – It provides pre-build components and structures which can be used to
build app without writing code from scratch

Nodejs is not exactly a framework

1. Js initially used web browsers to run


2. Could not use js to build something other than website
3. Js uses V8 engine(written in c and c++)
4. Through node we can run js in server/desktop – we can use js just like python, c, ruby etc
5. Node allows to build app on computer using js
6. Js makes scalable app, also non-blocking in nature due to being asynchronous, huge
ecosystem
1. REPL – can be performed by any programming language
2. To enter node repl – type node in command line
3. Cntr + C – generally to get out of anything in command line
4. Repl is useful in command lines
5. To run a file in repl – node index.js

Native Node Module

1. Starting toolset (reading writing in files, networking)


2. Native comes pre bundled with node

Const fs = require(“fs”)

1. Getting hold of file system module (a type of node native module) through above code (fs –
file system)

NPM (Node Package Manager) – Shared code library (Open source where people have written some
useful code)

1. Npm init – command to initialize npm


2. Package.json – configuration file (npm init helps us create this)
3. Json – javascript object notation
1. Install an npm package in the above way
2. Npm install can be written as npm i
3. We can put multiple packages names in the single npm install command
4. Node -y says y to all the info asked to created package.json

1. Above is a way to use a npm package


2. generateName is a method of the package
3. CJS (common js) – this has the method named require to set fs
4. EJS (Ecmo script module) – we can use import in place of reuire

1. Include the code for type in the package.json to enable the EJS module
2. Javascript object means – json
3. In – helps us to understand whether we are in right folder

Express

1. Express framework is built on top of node


2. Node is powerful and encompassing – we can create desktop apps ( e,g vs code), configure
IOT
3. Node is not specialized for creating backend
1. Node + express gives a cleaner code
2. Express is most popular framework for backedn

1. Client–side – frontend user side


2. Express is going to use node so we don’t have to delve into node’s code
3. We use our computer as server
1. Above are steps in which express server is created
2. Npm I express – to install express package

1. Port is location of server where we listen to requests from the client side

1. Thorugh above steps we have created node server – now we have to start it
2. Node index.js
1. Localhost is when we don’t have our server on internet so we use our own computer as
server
2. https://localhost is server and 3000 is the port on which we are listening
3. Port is like doors in our server and there are many doors (3000 is address of a door)
4. There are many doors because server has to listen to multiple requests (from diff apps or
hardwares)

1. Above commands helps to find which ports are open to listen


2. http is language using which computers communicate with each other
3. get keyword – used to get something from server (maybe webpage, data)
4. put/patch – update keywords
5. put – ex if we get a defective bicycle with rear wheel broken they can send put request to
replace the bicycle
6. patch – they will send patch request and send only wheel so you can replace it
7. delete – delete resource or data

1. / - signifies root/homepage
2. When we type any url with / or without we are making request to the homepage
3. Req.rawHeaders – list of key/value pairs coming from where the request is originated
4. Res.send – used to send back response to the request
5. Nodemon – automatically restarts node application when file changes in directory is
detected – we don’t have to manually stop and restart server
6. Nodemon index.js
7. Npm I -g nodemon – g means we are installing nodemon globally on our laptop not just for
this project
8. Right now we are only handling the endpoint /
1. We introduced new endpoint – about
2. Purpose of http – client computers being able to communicate to our servers
3. Sever can send text, html or status code in response to a request

4. Client error response – client has done or requested something that is not right
5. Server error response – server side app has something wrong with it and not working as a
result
6. Mdm docs – here you can find meaning of all the status codes
1. Post request is made from some form of forms and data goes to server along with post
request.
2. If don’t want to create screen to make the request and just want to focus on building api and
backend and leave rest to the frontend team – use postman

1. We can straight away use http request as method of the express object
2. Generally files don’t have node modules as file can contain many dependencies
3. Do npm I – this will install all the dependencies
1. Middleware – we see a lot in node and express based applications
2. When request comes to the server and before it gets processed by the route handlers (post,
get) there is something in between which can work with these requests.
3. It can pre- process the request, we can log request (what time it came, what type, status),
for authentication (before it goes to backend handlers we can check whether it came from a
authorized client), can identify and handle errors

1. Body parser – type of middleware


2. Commonly used to handle form data
3. Parse body of a post request
1. Form has action which is route and method
2. Value in submit is the name we want to give to the button
3. Public folder has static files like html, images which don’t change

1. Sendfile method requires exact path – for this we use dirname which gets the directory
name in the cloud we are hosting the server since we don’t host server locally
1. Middleware functions are above
2. Body-parser is pre-processing category

3. Morgan is a type of logging middleware


4. Morgan is triggered before app.get is triggered and logs the information of the request

1. Above is ex of custom middleware – define func inside app.use


2. Next means when do you want to go to the next lines of code (maybe another app.use or
request handlers) – you can go before logging or after logging

EJS

1. Embedded js – in html
1. We do above so we can pass the info received to a html file
2. This can be done through templating

1. We can directly send the html to the server in the same file and use the fetched js but if it is
large html it can be complex.
2. If all html gets to be rendered in js file(server side code) which is meant to deal with function
– this is not great
3. We want to take care of separation of concerns – separate frontend/backend, separate
structure/style/functionality

4. There are many templating languages – most commonly used with express and node is EJS
1. ejs works like having a js module that allows use of js inside html
2. we get the data from server side and is used in the ejs file and rendered into the screen

3. res.sendfile – this method is used to send static file but ejs files are dynamic
4. so we use res.render method to which we pass an object with key value pair
5. mkdir views; touch index.js views/index.ejs – creates a dir, and 2 files in one command line
1. above are ejs tags
2. the variable inside is interpreted js with an output (ex – if we keep it as angela, agela will be
printed on the screen)
3. 2nd one without equal sign is executable js, it can contain any js code. But it will not give any
output
4. With minus sign – the content inside is rendered as html. It will be sent as html to the ejs file
and rendered as html on the screen
5. To escape ejs tag – we can write another percent after opening tag or before closing percent
tag
6. 5th is how we write comment in ejs file
7. 6th we can insert another ejs where the ejs is being used in the file – maybe we have header,
footer and body of a webpage. Since header, footer is same we can insert those two in the
ejs file containing logic of the body.

1. Above is example of using ejs – we are using only code and output ejs tags
2. When we insert another ejs file in an ejs file in views folder, the another ejs file should also
be in the same views folder

1. Suppose there is no data fruits being passed to ejs file – if we try to write if statement like js
it won’t work
2. It checks fruit – if not found it crashes the app

1. To handle the scenario we use locals.fruit.


2. Locals have all the local variable from the index.js and it does not needs to be defined
3. This is important when we are passing data from server to ejs file
1. We pass data from client to server side using ejs(post route)

1. We cannot directly use the css in ejs as they are static files
2. We need to specify and tell express the location of static files as above
3. Href in link is relative to the public folder address we give in the express
4. Express.static is middleware
5. If several ejs pages – codes gets repeated
6. We don’t want repetation. We use <% %> tag to include dynamic part in ejs files
1. We can do above and include same haeder and footer content in each ejs file and only focus
on the content of each page

2. All the files location that we give in server js should be relative to views folder
3. Here we have put partials before filename because it is in partials folder of views folder

You might also like