Main text/ report


 Website Development:

Website:

A website is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Notable examples are wikipedia.org, google.com, and amazon.com.

All publicly accessible websites collectively constitute the World Wide Web. There are also private websites that can only be accessed on a private network, such as a company's internal website for its employees.

Websites are typically dedicated to a particular topic or purpose, such as news, education, commerce, entertainment, or social networking. Hyperlinking between web pages guides the navigation of the site, which often starts with a home page.

Web development is the work involved in developing a Web site for the Internet (World Wide Web) or a private network). Web development can range from developing a simple single static page of plain text to complex Web-based Internet applications (Web apps), electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development.


REQUIREMENTS

Software : 

        i) OS: widows 10

        ii)  development technology: Javascript/ ECMA Script, HTML, CSS, Node, react

        iii) browser: Chrome and Edge

        iv) Database: MongoDB, MongoDB Compass, Firebase db

  Hardware: 

        i) intel core i3

        ii) 4gb Ram (min)

        ii) Asus X507UA(laptop)


Index

1) HTML

HTML is the standard markup language for creating Web pages. HTML stands     for Hyper Text Markup Language; HTML describes the structure of a Web page; HTML             consists of a series of elements; HTML elements tell the browser how to display the content;     HTML elements are represented by tags; HTML tags label pieces of content

2)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
  • External stylesheets are stored in CSS files
    
    2.1) CSS Syntax:
        A CSS rule-set consists of a selector and a declaration block:
           syntax:
        Selector(h1,p) {
                property: values        
        }
        Example:
        h3{
            color: green;
            font-family: verdana;
        }
        
        The selector points to the HTML element you want to style.

        The declaration block contains one or more declarations separated by semicolons.

        Each declaration includes a CSS property name and a value, separated by a colon.

        Multiple CSS declarations are separated with semicolons, and declaration blocks            are surrounded by curly braces.

        we can use css in the html file(in line css) by giving the style attribute to the html            tag or we can make separate file of css as example.css and we have to link that            file in html by give link in link tag in head tag.

        reason: using css separate file is easier to maintain, reduce bandwidth, flexibility            and reduce the file size as a result faster loading of website.

        example:

        <head>

        <link rel="stylesheet" type="text/css" href="mystyle.css">

      </head>
    2.2) id selector and class selector
        

    The CSS id Selector

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

    The id of an element is unique within a page, so the id selector is used to select one     unique element!

    To select an element with a specific id, write a hash (#) character, followed by the id     of the element.

    example:

        #para1 {

      text-align: center;
      color: red;
    }
    
    

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

example:

.center {
  text-align: center;
  color: red;
}


other selectos

CSS Styles(basic):
Background properties
Border properties
Padding
Margin
Color
Font properties
Link properties

3)Javascript:

Javascript (JS) is a scripting languages, primarily used on the Web. It is used to enhance HTML pages and is commonly found embedded in HTML code. JavaScript is an interpreted language. Thus, it doesn't need to be compiled. JavaScript renders web pages in an interactive and dynamic fashion.

3.1) Basics of javascript
    a) Variables
    var x = 5;
   var y = 6.67;
   var z = x + y;
    
    b) Strings
    var carname = "Audi A3";
   var strcount = carname.length;

   c) Object
    var student = {name: 'chandan', yob: "1998", gender: "male"};

    d) Array
     var basket = ["Apple", "banana", "grapes"];

    e) Functions
     function (firstNum, secondNum){
        return firstNum*secondNum;
     }
 3.2) features of javascript

This section contains some examples of what JavaScript can do:

  • JavaScript Can Change HTML Content
  • JavaScript Can Change HTML Attribute Values
  • JavaScript Can Change HTML Styles (CSS)
  • JavaScript Can Hide HTML Elements
  • JavaScript Can Show HTML Elements

Example: 
document.getElementById("demo").innerHTML = "Hello JavaScript";

 3.3)  ES6
ECMAScript (or ES) is a scripting-language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It was created to standardize JavaScript to help foster multiple independent implementations.
    example:
     var x= 20;
      function(){
        let x=100;
        return x;
        }
  
    example:
     var x= 20;
      function(){
        const x=100;
        return x;
        }//result:20
    example:
      
       var x = function(x, y) {
       return x * y;
        }

    // ES6
    const x = (x, y) => x * y;
    example:
    class ClassName {
      constructor() { ... }
    }

3)NODEJS

A common task for a web server can be to open a file on the server and return the content to the client.

Here is how PHP or ASP handles a file request:

  1. Sends the task to the computer's file system.
  2. Waits while the file system opens and reads the file.
  3. Returns the content to the client.
  4. Ready to handle the next request.

Here is how Node.js handles a file request:

  1. Sends the task to the computer's file system.
  2. Ready to handle the next request.
  3. When the file system has opened and read the file, the server returns the content to the client.

Node.js eliminates the waiting, and simply continues with the next request.

Node.js runs single-threaded, non-blocking, asynchronously programming, which is very memory efficient.

Functions

  • Node.js can generate dynamic page content
  • Node.js can create, open, read, write, delete, and close files on the server
  • Node.js can collect form data
  • Node.js can add, delete, modify data in your database

What is a Node.js File?

  • Node.js files contain tasks that will be executed on certain events
  • A typical event is someone trying to access a port on the server
  • Node.js files must be initiated on the server before having any effect
  • Node.js files have extension ".js"


how to use Node

const express =  require('express');
const app = express();
const mongoose = require('mongoose');
const router = express.Router();
const MongoClient = require('mongodb').MongoClient 
const bodyParser = require('body-parser'); 
const session   =  require('express-session');
// const expressValidator = require('express-validator');
const flash   = require('connect-flash');
const passport = require('passport');
// var MongoStore = require('connect-mongo')(session); 


mongoose.connect('mongodb://localhost:27017/EmployeeDB', {useNewUrlParser: true, useUnifiedTopology: true}, (err) => {
     if(mongoose.connect){console.log('Success! MongoDB Connected..')}
     else{console.log('Error in Db connection : ' + err)}
});


// passport config
require('./config/passport')(passport);


//view engine
app.set('view engine', 'pug')


// express session midlware
app.use(
    session({
        secret: 'secret',
        resave: true,
        saveUninitialized: true
    })
);


// passport  middleware 
app.use(passport.initialize());
app.use(passport.session());


// connect flash midlware
// app.use(flash());


// Express Messages Middleware
app.use(require('connect-flash')());
app.use(function (req, res, next) {
  res.locals.messages = require('express-messages')(req, res);
  next();
});


app.use(express.urlencoded({ extended : false }));
// parse application/json
app.use(bodyParser.json());


//routes
app.use(router);
app.use('/', require('./routes/index'));


app.listen(3000, () => {
     console.log('Express Server Started At Port : 3000');

});


Comments

Post a Comment

Popular posts from this blog

edistrict

  id: 100894661 prevpass: Chandan@1234 pass: Chandan@123             17/aug/2021 linked with: Adhaar: 490556476387 phone number: 8285281356 email id:  imjunior471@gmail.com pass: Chandan@123, 1-aug-2023
Read more

richTextEditor

  import   React   from   'react' ; import  { Editor ,  EditorState , getDefaultKeyBinding ,  RichUtils }  from   'draft-js' ; import    '../assets/StyleTextEditor.css' ; import   '../../node_modules/draft-js/dist/Draft.css' ; class   RichTextEditor   extends   React . Component  {       constructor (props) {         super ( props );         this . state   =  {editorState:  EditorState . createEmpty ()};         this . focus   =  ()  =>   this . refs . editor . focus ();         this . onChange   =  (editorState)  =>   this . setState ({ editorState });         this . handleKeyCommand   =   this . _handleKeyCommand . bind ( this ); ...
Read more

CSS-position property

  position:static; Element cannot be move from their position, that is element get fixed   position:relative; It helps move an element with respect to its original position. position:fixed: It moves the element with respect to the browser windows. The position of the element remains fixed even if we scroll the web page. The next element present after the position element takes the place of the element leaving no gap. position:absolute; It moves the element with respect to the nearest positioned ancestor element. Next element will take the gap. z-index; It is used to position an element along the z axis. It works only positioned on elements.
Read more