NodeJS

 NODE js

• Node JS is a open source environment
• It's  sever side isn't a programming language
• It's helps to run Javascript code on sever side
• It's support all 0S
• Very Fast 
• It's has Single threaded  module
• No buffering data
• Non blocking and Asynchronous
• Runtime environment With Javascript Library 

Modules

• Node JS  modules same as Javascript Libraries.
• Node JS has lot of built in modules
• You can create your own modules 

Note:- If you you want to include the in-build modules or your own modules in your application then you use the require() function with the name of the  module 

Built in Modules

• http:-To Connect http server
• https:-To Connect https server 
• fs:- To Handle file system
• events:-To Handle events
• path:- To Handle file Paths
• url:-To parse url string 

HTTP Work Method

• HTTP stands for Hyper Text Transfer Protocol
• WWW stands for World Wide Web
• WWW is about communication between web clients and server
• Its done by sending HTTP requests and receiving HTTP responses
• A client (Browser) sends HTTP request to the web
• And web server receives the request
• The server  runs an application to process the request
• The  server returns an HTTP response to the browser
• The client receives the response.

HTTP MODULE

• Use  require directive to load Node JS modules.
• HTTP module is a build in module of Node JS,Which allows Node JS to transfer data over the hyper text Transfer Protocol
• The HTTP module use the createServer() Method to create an HTTP server 
• If the response from the HTTP server is supposed to be displayed as HTML ,you should include an HTTP header with a content type.

       The first argument of the res.writeHead() is the status code,200 means success, the second argument is an object containing the response headers.

• HTTP server that listens to server ports and gives a response back to the client.
• The function passed into the http.createServer() method,will be executed when someone tries to access the computer on port 8080

File System Module

• Import file system module using require keyword

                    EX:- const fs = require('fs');

• The Node JS file system module allows to create,read,write,update,delete or rename the files on your computer
•  Inside the callback function we pass the first parameters as err for printing the error message when the file have an error.

 

URL Module

• URL module  splits up a web address into readable parts.
• Parse an address with the url.parse() method,and it will splite a URL object with each part of the address as properties 

http://localhost:8080/Ann.html

• Host: localhost:8080
• Path name: Ann.html

Note:- Web servers usually respond with html documents along with images,style sheets and scripts.

Send Gmail Using Node JS

• We can use Nodemailer Module to send Gmail from our system.
• We have to install Nodemailer from npm using "npm install nodemailer"comand
• You can compose  a mail in various format such as text,html. 

Git And Github

 Git And Github

• Git is a Free and open 
• version control system
• speed and efficiency

Git hub

• GitHub is the best place to share code with friends

Github is a website and cloud-based service that helps developers store and manage their codes.

git commnds

• git int
• git add
• git status
• git commit -m " your message"
• git remote add origin "https...... github address"
• git remote -v
• git push -u origin master
• git remote remove origin

ER Diagram

 ER Diagram

ER Diagram stands for Entity Relationship 

ERD is a diagram that displays the relationship of entity sets stored in a database. In other words, ER diagrams help to explain the logical structure of databases. ER diagrams are created based on three basic concepts: entities, attributes and relationships.

ER Diagrams contain different symbols that use rectangles to represent entities, ovals to define attributes and diamond shapes to represent relationships.

R diagram looks very similar to the flowchart. However, ER Diagram includes many specialized symbols, and its meanings make this model unique. The purpose of ER Diagram is to represent the entity framework infrastructure.

ER Model

ER Model stands for Entity Relationship Model is a high-level conceptual data model diagram. ER model helps to systematically analyses data requirements to produce a well-designed database. The ER Model represents real-world entities and the relationships between them. Creating an ER Model in DBMS is considered as a best practice before implementing your database.

ER Diagram Symbol

• Rectangles: This Entity Relationship Diagram symbol represents entity types
• Ellipses : Symbol represent attributes
• Diamonds: This symbol represents relationship types
• Lines: It links attributes to entity types and entity types with other relationship types
• Primary key: attributes are underlined
• Double Ellipses: Represent multi-valued attributes

Components of the ER Diagram

• Entities
• Attributes
• Relationships

Usages of ER Diagram

• ER model allows you to draw Database Design
• It is an easy to use graphical tool for modeling data
• Widely used in Database Design
• It is a GUI representation of the logical structure of a Database
• It helps you to identifies the entities which exist in a system and the relationships between those entities

Mongo DB

 Mongo DB

• Mogo db is a document-oriented database program
• Mongodb easy to learn and use
• it's store data in flexible
• Mongodb is free to use

usage of Mongodb 

• Save big data
•  Content Management and delivery
• Mobile and Social infrastructure
• User Data Management

Features of Mongodb

• High availability through built-in replication and failover
• Horizontal scalability
• End-to-end security
• Native document validation
• Schema less
• Ease to scale-out
• No complex joins

Mongo db commands

sudo mongo:-To start the server

sudo mongod:- To start the client

use "database-name":- Create a database if any database has on this name this command select that data base.

show dbs:- Shows all database

Note:-Atleast 1 file must be inside the database to show the database  

db.createCollection"name":-To create a Collection

db."collectionname".drop():-To delete a Collection

db.dropDatabase():-Delete The database

db."collectionname".insert:-To insert the document to the collection

db."collectionname".remove:-Remove Collection

db."collectionname".find:-To show the document inside the Collection

$gt:-Greater than

$gte:-Greater than or Equal

$lt:-Less than

$lte:-Less than Equal

$eq:- Equal

$ne:-Not Equal

JQuery

 JQuery(write less,do more)

• This is not a language 
• It's javascript library
• Easy to learn
• Jquery makes for easier to use javascript on our web
• Open source

JQuery is not a only library for javascript But JQuery is probably most popular and extendable

JQuery works mostly All browers

                        JQuery library has some features

1. HTML/DOM manipulation
2. CSS manipulation
3. HTML event methods
4. Effects and animations
5. AJAX
6. Utilities

JQuery Syntax

• Basic syntax is:-  $(selector).action()

•  $ sign to define/access jQuery

• (selector) to "query (or find)" HTML elements

• A jQuery action() to be performed on the elements(s)

Two ways to insert the jquery

Download the jQuery library from jQuery.com

1.There are two versions of jQuery available for downloading:

• Production version - this is for your live website because it has been minified and compressed
• Development version - this is for testing and development (uncompressed and readable code)

2.Include jQuery from a CDN, like Google

   <head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

JavaScript

 Java Script

• Java script is a programming language
• It's makes our Web pages interactive
• Interpreted Language
• Java script mostly using in client side
• Object based language
• scripting language 
• Easy to learn

                                Javascript is not a java completely different and they are

                                                             2 languages 

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

   1. HTML to define the content of web pages

   2. CSS to specify the layout of web pages

   3. JavaScript to program the behavior of web pages

Java script fundamentals

• Variables
• Arrays
• Loops
• Conditions
• Comparison&operators
• Objects
• functions
• Program flow
• Data Types
• Prototypes
• Events

Usages of Javascript

• Responsive
• Interactive
• Create Cookies
• Detect user
• Form Validation
• Create animations
• Build apps
• Slideshow

You can change html attribute value ans css style by javascript

 import javascript

In HTML, JavaScript code is inserted between <script> and </script> tags.

JavaScript Display Possibilities

JavaScript can "display" data in different ways:

• Writing into an HTML element, using innerHTML.
• Writing into the HTML output using document.write().
• Writing into an alert box, using window.alert().
• Writing into the browser console, using console.log().

Bootstrap

 Bootstrap

• Bootstrap 4 is latest version of bootstrap 
• Bootstrap is a css frame work that most popular
• mobile approachable framework
• Responsive framework 
• it's totally free
• Free to modify,save,share and use in our project 
• All major browsers are supported but internet Explorer 9 and down isn't supported 

Bootstrap Components

• Album
• Pricing
• Checkout
• Cover
• Carousel
• Sign-in 
• Sticky Footer
• Blog
• Dashboard
• Sticky Footer navbar

Frame Works

• Template
• Grid
• Cheatsheet
• Cheatssheet rtl

Two Methodes to import Bootstrap

1. Include Bootstrap 4 from a CDN
2. Download Bootstrap 4 from getbootstrap.com

Containers

You learned from the previous chapter that Bootstrap requires a containing element to wrap site contents.

Containers are used to pad the content inside of them, and there are two container classes available:

1. The .container class provides a responsive fixed width container
2. The .container-fluid class provides a full width container, spanning the entire width of the viewport

Bootstrap 4 Grid System

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1
span 4				span 4				span 4
span 4				span 8
span 6						span 6
span 12

Cascading Style Sheets

 Css

CSS stands for Cascading Style Sheets.css describes how html elements are to be displayed on screen, paper, or in other media.Css saves a lot of work. It can control the layout of multiple web pages all at once.

Css has 3 types

1.Inline:-Add a style line by Line(directly in html)

2.Internal:-Add style in body

3.External:-Linking external css file

Css Syntax

ex:-p {

  text-align: center;}

p is a selector

text-align is a property, and center is the property value

Css selectors

CSS selectors are used to "find" the HTML elements you want to style.

• Simple selectors:-

 Selects HTML elements based on the element name

The id attribute of an HTML element to select a specific element.

• Combinator selectors 

(select elements based on a specific relationship between them)

•  class selectors(select elements based on a certain state)

The id selector uses the id attribute of an HTML element to select a specific element.

• Pseudo element selectors (select and style a part of an element)

html tags selected by html element

• Attribute selector (select elements based on an attribute or attribute value)

The Attribute selector uses the  attribute of an HTML element to select a specific element.

HTML TABLES And FORMS

Table

        Html Table Structure

<table>

                    <tr>

                    <th></th>

                    <Th></Th>

                    </tr>   

                    <tr>

                    <td></td>

                    <td></td>

                    </tr>

                    </table>

<caption> =to add a title to the table

<border> = To add a border to a table

<padding> = Cell padding specifies the space between the cell content and its borders

<rowspan> = To join Tables rows

<colspan> = To join Tables columns

FORM

<Form> = The HTML element is used to create an HTML form for user input

<input> = TO get Information From User

<lable> = This element is useful for screen-reader users, 

<input type="radio"> = Radio buttons let a user select ONE of a limited                                         number of choices.

<input type="checkbox"> = user select MORE options of a limited number                                             of choices.

<input type="submit"> = defines a button for submitting the form                                                         data to a form-handler.

Hyper Text Markup Language

HTML

• Html Means Hyper Text Markup Language
• It is not a programming language Just display
• It's Just Skeleton
• Need 2 Thinks to Learn HTML                                                                                                                          1.Browser:-Google Chrome,Firefox...                                                                                         2.Text Editors:-Sublime,Notepad++

• Html uses tags=< >,</>
• Elements is Tags and Content E.g:-<>Content</>

HTML Main Structure

Tags

• <h1> = headigs
• <p> = Paragraph
• <b> = Bold
• <i> = Italic
• <u> = UnderLine
• <br> = Break
• <sub> = Subscript
• <sup> = Superscript
• <strong> = Strong Text like Bold
• <small> = Smallest text
• <del> = Delete
• <mark> = Mark a text
• <ins> = insert
• <em> = Emphasis Like Italic
• <ol> = Ordered List
• <ul> = Un Ordered List
• <li> = list
• <img src"Image Location"> = Inseart a Image
• <a href="Link"> = To insert a link
• <hr> = Horizontal Rule

Web Development

                         Web Development.

Web Development is Building Creating And Maintaining Web sites

Web Browser:-It's a software it helps to connect world wide web.                                                                                       Example for Web Browser-Google Chrome,Mozilla FireFox,Opera,                                                           Internet Explorer.....

But Google,yahoo... are search Engines not a Web Browser.

Web Server:-Web site All Files and folders are stored here.

Database:-It's in Server And Secure Data are Saved here.

Web Sits:-It has lot of Web pages.Every web sites have unique Address(Name) that's calls URL(Uniform Resource locator) And IP(Internet protocol)  EX:- google.com,wikipedia

Dynamic Web sites:- Displays Various content
                                  Easy Chat And contact.
                                  Database And Backend Facilities
                                  Difficult to Develop

Static Web Sites:-Fixed With Content Displays the same information to every visitor 
                            Easy to Develop
                            No contact with the owner Only Show the information
                            There is No Database And Backend Facilities

Web Page:-It's Into the Web Site

DNS Server:-it Change URL To Ip.

Language For Web Development

• front design:- Html/css
• Clint Side:-Java Script
• Sever Side:-php,Nods.js,Ruby,python
• Database:-Sql,mongoDB

Integrated Development Environment(IDE):-This is a Software                                                                                                                                          it gives All What we want to Develop  Some ide works                                                                              only in Particular OS