Express/node

Hur man skapar en basic express-server och serverar en index-fil.

1. Skapa en mapp.
2. I terminalen i mappen skriva:
npm init
Detta kommando skapar en package.json fil. Detta fil innehåller metainformationen om din app. Den är nödvändig för att allt ska fungera.
3. Ladda ner express genom kommandot:
npm install express –save
Med tillägget –save så sparas modulen automatiskt i package-json-filen, så slipper du uppdatera den för hand.
4.Skapa en fil som heter app.js (den kan heta server.js, eller någonting annat. men praxis med express är att kalla den för app.js).
5. I filen skriv in följande kod:

var express = require("express"); //Här importerar vi modulen express.
var path = require("path"); //Här importerar vi modulen path. Denna hjälper oss att enkelt hitta i vårt filsystem på datorn.

var app = express();

app.get("/", function(req, res){
res.sendFile(path.join(__dirname + "/index.html"));
});

app.listen(3000); //Säger åt servern att börja lyssna på port 3000 efter requests.

app.get – Här skickar vi en get-request, om någon söker efter sidan localhost:3000. Det är alltså själva index-sidan. Så om nån går in på index-sidan (alltså localhost:3000) så skickar browserna en request till servern. Servern besvarar då requesten med ett response (res). Responsen är att skicka en fil: res.sendFile. path.join(__dirname + “/index.html”)); – path.join(__dirname tar fram hela adressen fram till index-filen. Så istället för att behöva skriva /Users/userName/node-app/serve-static-file. Så detta skulle alltså gå att skriva:
res.sendFile(/Users/minDator/kod/serve-static-file/index.html”));

6.Skapa index.html
Nu behöver vi bara skapa en index.html-fil för att skicka när servern har tagit emot en request. Så skapa en index.html-fil i samma mapp som app.js, med vanligt html-innehåll.

All kod finns att hämta här.

Hur man skapar en basic express-server och serverar en dynamisk jade-fil

Skillnaden mellan detta exempel och exemplet ovan är väldigt liten. Den enda direkta skillnaden är att jade-filer ovandlas i servern till html. Så själva filen index.jade skickas inte, hur den omvandlas till index.html och skickas därefter.

1. Skapade package.json
npm init

2. ladda ner expess-modulen
npm install express –save

3. ladda ner jade-modulen
npm install jade –save

4. skapa en app.js-fil.

var express = require("express"); //Här importerar vi modulen express.
var path = require("path"); //Här importerar vi modulen path. Denna hjälper oss att enkelt hitta i vårt filsystem på datorn.
var jade = require("jade"); //Här importerar vi modulen jade

var app = express();

app.get("/", function(req, res){
res.render("index", {title : "Testing jade"}));
});

app.listen(3000); //Säger åt servern att börja lyssna på port 3000 efter requests.

Det enda som egentligen skiljer sig här, jämfört med tidigre tutorial är att vi importerar modulen jade, genom require(“jade”);.
Sedan renderar vi filen istället för att skicka den. Eftersom vi inte vill skicka index.jade så måste vi göra om den till index.html, detta gör vi genom
res.render(“index”)
Sedan lägger vi till lite dynamiskt innehåll för att det är kul.

5. Skapa mappen views och skapa däri filen index.jade.

doctype html
html
head
title= title
body
h1 This is part of the tutortial to render and serve a jade-file

Det enda som egentligen är konstigt här är title= title. Det är här vi infogar den dynamiska datan som vi lade till i app-js-filen.
res.render har som default-väg mappen views. Så om du lägger index.jade i root-mappen så kommer du få upp ett felmeddelande. Därför måste du skapa mappen views och lägga filen där i.

Hur man skapar en basic express-app som är kopplad till en databas.

Installera alla moduler
1. npm init
2. npm install monk –save
npm install mongodb –save
npm install express –save
Monk är modulen som hjälper oss att hantera vår databas.
Mongodb är vår databas
Express är såklart modulen som hjälper oss med routering och http å sånt.

Konfigurera databasen
3. skapa mappen data
4. öppna terminalen och öppna mongodb genom kommandot
mongod –dbpath /Users/Dator/kod/node/database-app/data/
Eller till den korrekta adressen. När du skriver in det här kommandot som sparas databasen i mappen data.
5. Gå till mappen data och starta mongo-konsollen med kommandot
mongo
6. Skapa en databas med kommandot:
use db-app
Skapa sedan en collection och infoga något med kommandot:
db.info.insert({“namn” : “Lars”});
info är vad jag väljer att kalla min collection.

Skapa innehåll
7. Skapa filen app.js

//Importera nödvändiga moduler
var express = require("express");
var path = require("path");
var jade = require("jade");
var monk = require("monk");
var mongodb = require("mongodb");

//Spara databas i variabeln db. db-app är namnet på databasen jag skapade tidigare.
var db = monk("localhost:27017/db-app")

// Skapar en express-app
var app = express();

//Routrar till min stylesheetmapp och js-mapp.
app.use(express.static(__dirname + '/stylesheet'));
app.use(express.static(__dirname + '/js'));

//Routrar index.html till index-sidan.
app.get("/", function(req, res){
	res.sendFile(path.join(__dirname + "/index.html"));
});

//Detta gör vår databas tillgänglig för vår router.
app.use(function(req, res, next){
  req.db = db;
  next();
})

//Här sätter vi upp "sidan" db-app. Det är alltså sidan localhost:3000/db-app. Så om nån skickar en request till den sidan, så svarar vår server med att skicka vår databas.
app.get("/db-app", function(req, res){
	var db = req.db;
	var collection = db.get("info");
	collection.find({},{},function(e, docs){
		res.json(docs);
	});
});

app.listen(3000);

8. Skapa index.html, style.css och script.js.
index.html skapas i rootmappen.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Database test</title>
	<link rel="stylesheet" href="/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="/script.js"></script>
</head>
<body>
	<h1>Testing to connect to database</h1>
</body>
</html>

Ja, här är det inga konstigheter. Vi importerar bara jQuery och vår css och vårt javascript-fil.

9. Gör ett ajax-get-call i script.js
Öppna script.js.

$(document).ready(function(){
getData();
});
function getData(){
	$.getJSON("/db-app", function(data){
		console.log(data);
	});
};

Det här är inga konstigheter. Här skapar vi en funktion som heter getData och som körs automatiskt när sidan öppnas. I funktionen gör vi ett getJSON-call till sidan “/db-app”. När vi tar emot datan så printar vi bara ut den i konsollen.

Sådär. Det var allt. Svårare än så är det inte. Det krävs alltså i princip bara 4 filer. package.json, app.js, index.html, och script.js för att skapa en server som är kopplad till en databas.

Koden finns att hämta här

Hur skapar man en express-server som kan göra get och post-requests till en MongoDB-databas

1. npm init
2. Installera moduler
npm install express –save
npm install mongodb –save
npm install body-parser –save
npm install monk –save

ett enklare sätt att skriva detta är:
npm install express mongodb body-parser monk –save
3. Skapa en databas

Skapa mappen data
mongod –dbpath /path/till/data/mappen
Gå till mappen kör kommandot:
mongo
sedan:
use namnpådatabas
skapa en collection och sätt in data där
db.namnpåcollection.insert({“namn” : “Pelle”, “age” : 34});
Kontrollera att datan finns i databasen:
db.namnpåcollection.find().pretty();

Datanbasen är färdig.

4. Skapa filen app.js
Här är filens innehåll. Det mesta bör vara bekant vid det här laget.

//Importera moduler.
var express = require("express");
var path = require("path");
var bodyParser = require("body-parser");
var monk = require("monk");
var mongodb = require("mongodb");

//Koppla upp oss mot databasen
var db = monk("localhost:27017/namnpådatabas");

//Initierar expressappen.
var app = express();

//Detta är för att kunna serva våra statiska filer i css och js-mapparna.
app.use(express.static("css"));
app.use(express.static("js"));

//Här servar vi index.html-filen. Inga konstigheter.
app.get("/", function(req, res){
	res.sendFile(path.join(__dirname + "/index.html"));
})

//Här skickar vi databasens innehåll till sidan /databas. Denna sida plockas upp av ett ajax-call i filen script.js som vi kommer skapa senare. collection.find tar här en callbackfunktion, å docs i callbackfunktionen hänvisar till det som finns i databasen. Sedan skickar vi det som finns i databasen som response. Därav res.json(docs).
app.get("/databas", function(req, res){
	var collection = db.get("datacollection");
	collection.find({}, {}, function(e, docs){
		res.json(docs);
	})
})

//Detta är vad som kallas för middle-ware. Detta behövs för att servern ska kunna ta emot information från requesten som kommer härafter. Utan bodyParser så kan man inte få tag i datan.
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(bodyParser.json());

//Nu kommer vi vill routern som hanterar post. Här ser vi alltså att om det postas någonting till sidan /adduser så ska servern ta informationen req["body"] å spara den i variabeln namn. Sedan insertar vi datan i databasen. Det är viktigt här att sedan skicka ett svar till klienten. Svaret res.send("done"); annars så får man ett fel. Det är även fundamentalt att skicka någon information. Om ingen data skickas så får man också ett fel 500 Internal Server error.
app.post("/adduser", function(req, res){
    var name = req["body"];
    var collection = db.get("datacollection");
	collection.insert(name, function (err, doc) {
  if (err) throw err;
  console.log(doc);
  res.send("done");
	});
})

//Här säger vi åt servern att sätta igång å lyssna.
app.listen(3000);

5. Skapa index.html
Aja, inga konstigheter här. Vi importerar jQuery. Sedan skapar vi ett enkelt formulär get vardera input ett eget id. Och sedan får knappen ett eget id.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>MongoDB-app</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="/script.js"></script>
	<link rel="stylesheet" href="/style.css">

</head>
<body>
	<h1>Post your name and age to the database</h1>

	<form>
		<input id="name" type="text" placeholder="name">
		<input id="age" type="text" placeholder="age">
		<button id="btnAddUser">Submit</button>
	</form>	
</body>
</html>

6. Skapa filen script.js
Inga konstigheter här heller direkt.

Adduser

$(document).ready(function(){
	
//Först i vårt getJSON så tar vi emot data från sidan /databas, sedan loggar vi datan och printar sedan ut den på sidan.
$.getJSON("/databas", function(data){
	console.log(data);
	for (key in data){
		$("body").append(data[key].namn + "<br>");	
	}
	
	})
//Sen har vi en knapp som kallar funktionen addUser när man klickar på den.
	$('#btnAddUser').on('click', addUser);
});

//Nu kommer vi nog till det viktigaste. Här har vi en variabel som fylls med värdena från vårt formulär. Sen har vi vårt ajax-call. Som skickar till url: /adduser. typen är POST. datan som den skickar är variabeln som vi deklarerar precis innan. Å typen är JSON.
function addUser(){
	var newUser = {
	    'namn': $('#name').val(),
	    'age': $('#age').val(),
	}
	console.log(newUser);
	$.ajax({
		  url: '/adduser',
	    type: 'POST',
	    data: newUser,
	    dataType: 'JSON'
	});
	 }

7. Sådär. Det var allt. Nu är det bara att köra igång databasen och köra igång node med kommandot node app.js. Sen gå till localhost:/3000 Där kan du sen posta data till databasen.

Hur man skapar en express-server och kopplar upp den med mongodb med hjälp av mongoose

1. npm install mongodb express mongoose –save
2. Skapa app.js
3. Starta mongod och mongo.

var express = require("express");
var mongodb = require("mongodb");
var mongoose = require("mongoose");
var path = require("path");

//Starts express.
var app = express();

//Connects to the database. Databas is the name of the database.
//If it does not already exist mongo creates it.
mongoose.connect("mongodb://localhost/databas");

//Not sure what this does.
var db = mongoose.connection;

//This produces an error or success message when starting the server.
db.on("error", console.error.bind(console, 'connection error:'));
db.once("open", function(callback){
	console.log("database up and running")
});

//Here we create the database Schema. That is the format for how we are going to enter in data. 
//We also create the name of the collection on the last line.
var FormSchema = new mongoose.Schema({
	name: String,
	created: Date,
}, {collection: "apa"});

//Here we create an instance of the database-schema that we just created.
var MyForm = mongoose.model("Form", FormSchema);

//Here we print out the documents found in the database.
MyForm.find(function(err, data){
	console.log(err);
	console.log(data);
})

//Here we are creating new data andsaving it in the database.
var form1 = new MyForm({"name" : "Form 1"});
form1.save();

//För att hitta med dess id gör man såhär:
MyForm.findById("56537c01e53134e80a1142c4", function(err, data){
	console.log(data);	
});

Bra css/jQuery/js trix

Smooth-scroll till en sektion

Gör smooth-scroll till en sektion.
Lägg till den här koden i din .js-fil. Och ankra sedan länkarna till deras ID. Ex. Koden är copypastad här.

<section id="portfolio-section">
</section>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Fade in från vänster eller höger när man skrollar ner

Här finns filerna och dokumentationen.

JavaScript och Object Oriented Programming

Vad är ett objekt?

Ett objekt i Javascript är som ett objekt i verkligheten. Ett objekt består av properties. Ett fysiskt objekt består också av properties. Till exempel: objektet kopp består av handtag : 1, design: true, vikt : 1 kg. Dessa properties beskriver objektet. Ett annat vanligt exempel är objektet bil. En bil har properties dörr : 4st, motor: 1, färg: grön. Å så vidare.
Ofta pratar man om property och property value.

var myObject = {
name: "Lars", //Name är property och Lars är Property Value
age: 28
}

Hur skapar man ett objekt i Javascript?

Det finns i huvudsak två sätt att skapa ett objekt i javascript: object literal och object constructor.

Object literal ser ut såhär:

var myObject = {
name: "Lars",
age: 28
}

Constructor pattern ser ut såhär:


var Employee = function(){ 
} 

//eller såhär

function Employee(name, profession){
this.name = name;
this.profession = profession;
}

Employee är nu en Constructor-function som kan användas genom att använda keyword new. Så, för att skapa en ny emplyee. Gör du såhär:

var philip = new Employee();
//philip är nu ett nytt objekt som vi skapade från Employee-funktionen.

Hur lägger man till properties i ett objekt?

För att lägga till properties i ett objekt gör man såhär. Om man bygger vidare på exemplet som vi startat med ovan.

philip.ålder = 23;
philip.namn = "Philip";

Methods

Det finns private properties och public properties.
Objekt har sina egna funktioner, dessa kallas methods.

Lägga in javascript-script i WordPress parentheme

Leta efter sektionen i functions.php där script läggs till. Det kan se ut såhär.

function resonate_scripts() {
	wp_enqueue_style( 'resonate-style', get_stylesheet_uri() );

	wp_enqueue_script( 'resonate-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

	wp_enqueue_script( 'resonate-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

/* Här är mitt eget script so jag har lagt till. Det är baserat på jQuery det är därför som jquery finns i arrayen */
	wp_enqueue_script(
		'animations',
		get_stylesheet_directory_uri() . '/js/script.js',
		array( 'jquery' )
	);


	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'resonate_scripts' );

Grundläggande JavaScript

Inbyggda funktioner/methods

Manipulera stringar
.split() – Delar upp en sträng och lägger den i en array.
.splice() – Lägg till eller ta bort element, eller byt ut element i en array.
.reverse();
.substr(); //Tar två parametrar. Den första är var beskäringen ska börja. Den andra parametern specificerar hur många karaktärer som ska beskäras. Den andra parametern är valfri.
.substring(); //Detta är den äldre versionen av substr(); och gör samma sak. Skillnaden är den andra parametern. Substrings andra parameter är positionen efter den sista karaktären som du vill åt. Den andra parametern är valfri.
.sort();
.replace();
.indexOf(); //Används för att söka igenom en string.
.lastIndexOf(); //Samma som indexOf fast den börjar söka bakifrån.
.charAt(); //Har en parameter, som tar indexnumret av av en viss karaktär och returerar karaktären.

var string = "Har är min string";
string.charAt(0);//returerar H

charCodeAt(); //Samma som charAt, med skillnaden att den returerar ASCII numret på karaktären.
trim(); //Tar bort överflödigt whitespace i början och slutet av en string.

Manipulera nummer
.toFixed(1); – Antalet decimaler ett tal ska ha.
.parseInt() – Denna funktion gör om stringar till tal. Det är viktigt att komma ihåg att den tar två argument, varav det andra argumentet definerar vilket bas talet ska vara i. För att ovandla talet till base-10 så ska man alltså lägga till 10. Exempel:

parseInt("5", 10); 

typeof //För att se vad för typ av element något är. Om det är boolean, string etc.
filter(); Filtrerar bort element från en array.

Iterative Methods – loopa utan att använda loop
Dessa methods används för att loopa igenom arrays, utan att använda en loop. Dessa kallas därför för Iterative Methods. Det finns fem Iterative Methods.
every(); Går igenom en array och avgör om ett visst condition är sant eller falskt. Till exempel.

var numbers = [1,2,3,4,5];
function isLessThan3(value, index, array){
var returnValue = false;
if (value < 3){
returnValue = true;
 }
return returnValue;
}

var trueOrFalse = numbers.every(isLessThan3);
console.log(trueOrFalse); //Returns false. 

Eftersom the condition som finns i if-statementet är falskt. value är inte mindre än tre, eftersom värderna 4 och 5 finns där. Och de är inte mindre än tre. every() är alltså en method som avgör om varje del i en array är sann i förhållande till condition-statementet. Om du däremot skapar samma funktion, men använder det för some(); så kommer det att returera true, eftersom några av values är mindre än tre, vilket gör påståendet till sant.
some();

every() och some() är nyttiga, men du kan inte få ut någonting mer från dom än true och false. Det är därför som filter är så bra.

filter();
Filter gör precis som every() och some() och iterate genom en array. Men varje gång som påståendet är sant så läggs det värdet till i en ny array.

map(); är en väldigt användbar funktion. Den används för att söka igenom en array och göra någonting.

var array = [1,2,3,4,5];
//Om jag nu vill lägga till 1 på varje element inom arrayen så kan jag göra det med map, såhär:
var array = array.map(function(val){
  return val+1;
});
console.log(array); //[2,3,4,5,6]

reduce() – lägger ihop samtliga tal i en array till ett tal.

var array = [4,5,6,7,8];
var singleVal = 0;

var singleVal = array.reduce(function(previousVal, currentVal){
  return previousVal+currentVal; //returns 30
});

filter() – filter filtrerar bort alla delar i en array. Vad som ska filtereras bort defineras i funktionen. Exempel:

var array = [1,2,3,4,5,6,7,8,9,10];
array = array.filter(function(val){
  return val <= 5; //filtrerar bort alla tal som över över 5
});

concat(); används för att slå ihop två arrayer.

var array = [1,2,3];
var concatMe = [4,5,6];
array = array.concat(concatMe);

 
Matematik-methods
Det finns många methods rörande matematik.
Math.PI; Get PI
Math.Ceil(2.45); Rundar upp
Math.floor(2.45); Rundar ner
Math.round(2.45); Rundar av mot närmsta heltal

 

Object

Object i Javascript är som en dictionary i Python. Ordet Dictionary beskriver bättre vad det handlar om. Ett object består av en key och en value.
var person = {
namn: “Philip”,
age: “34”
}

 

Listor/arrays

Såhär skapar man en lista.


//Skapa en lista
var lista = ["namn", "djur", "nummer", 9, 8, 10000]

//Sortera en lista
lista.sort();

//Detta behövs för att listan skall sortera nummer som nummer och inte som strängar.
list.sort(function(a,b) {
return (+a) – (+b);
});

//Vänd listan bakochfram
lista.reverse()

//Ta ut delar av en lista och gör om den till en egen lista.
sliced = list.slice(0, 2) //Den första parametern är var slicen börjar, och den andra parametern (2) är hur många objekt ur lista du vill ta ut.

//För att ta reda på om en ett visst objekt finns i en array, gör såhär.
list.indexOf(“namn”); //Svaret blir positionen i listan, i detta fall 0

//Push och pop.
//För att lägga till i en array:
myArray.push([“detta laggs till langs bak i listan”]);

//För att ta bort det sista elementet i en array
myArray.pop();

//Shift och unshift
//För att ta bort det första elementet i en array
myArray.shift();
//För att lägga till det första elementet i en array
myArray.unshift();

 

Kopiera

Gör följande för att kopiera en lista.

var lista = ["Hej", "apa", 6, 7];

kopiaAvLista = lista.concat();

Nu är kopiaAvLista en kopia av listan. Helt separat.

Om du däremot gör såhär:

var lista = ["Hej", "apa", 6, 7];

länkTillLista = lista

Då skapar du i princip bara en länk till listan.
console.log

Används för att printa ut något, det motsvarar pythons print

console.log("Vad som ska skrivas");

var

var används för att skapa en variabel.

var = firstName = "James";
var age = 20;
console.log(firstname, age);

if


if ( "johan".length > 10 ) 
{
    console.log("Let's go down the first road!");
}
else 
{
    console.log("Du har ett kort namn");// What should we do if the condition is false? Fill in here:
    
}