---
# System prepended metadata

title: 'Course1~3(Oka,Form)'
tags: [form, ccc, deno, web, oka]

---

# Course1~3(Oka,Form)

###### tags: `web` `deno` `ccc` `oka` `form`


Course 1
https://www.facebook.com/ccckmit/videos/817332406069771/?idorvanity=266037214366597


---
Course 2
https://www.facebook.com/ccckmit/videos/3328236040831796?idorvanity=266037214366597




[TOC]


# Basic 

## Callback 

```typescript
function calledHello(f){
    f()
}

function hello(){
    console.log("Hello")
}

calledHello(hello)
```


Differential
```typescript
function df(f,x,h=0.001){

    return (f(x+h)-f(x))/h

}
console.log(df(Math.sin, Math.PI/4))
```


-->f(g(x)) concept

Map

The **`map()`** method **creates a new array** populated with the results of calling a provided function on every element in the calling array.


```typescript
function Mymap(array, f){
    
    let list =[]
    for(let i=0;i<array.length;i++){
        let element:number = array[i] 
        var squareElements:number = f(element)
        list.push(squareElements)
    }
    return list
}


function square(x:number=0){
    return x*x
}

console.log(Mymap([1,3,5],square))
```

## Object

```typescript
class Studnet{

    private name:string =""
    setName(name:string){
        this.name = name
    }
}

let object = new Studnet()
object.setName("meowhecker")
console.log(object)

```


## Parameter

Using object way is going to pass the reference to modify it  

```typescript

interface user{
    name:string
    password:number
}


let user={
    name:"meowhecker",
    password:123345
}

function Mo(object){
    object.name="meow"
}

Mo(user)
console.log(user)
```
![](https://i.imgur.com/9q20eZC.png)


# HTTP 

## Data exchange (front end <--> back end)


Convert javascript object into JSON form 

```typescript
console.log("OBJECT->JSON")
JSON.stringify()
```

Recover it 

```typescript
console.log("JSON->OBJECT")
JSON.parse()
```


```typescript

interface user{
    name:string
    password:number
}


let user={
    name:"meowhecker",
    password:123345
}

let transIntoJSON = JSON.stringify(user)

console.log(user)

console.log("OBJECT->JSON")
console.log(transIntoJSON)

console.log("<------------------------------------------>")

let JOSNtoObject = JSON.parse(transIntoJSON)

console.log("JSON->OBJECT")
console.log(JOSNtoObject)

```

![](https://i.imgur.com/5aA9nWh.png)

# [oak](https://deno.land/x/oak@v11.1.0) 



## BASIC Server 
a middleware framework for Deno native HTTP server


Two of the methods are generally to use 

- use()
- listen()

Middleware is added via the `.use()` method and the `.listen()` method will start the server and start processing requests with the registered middleware.


```typescript
import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use((context:any)=>{
    context.response.body="meowhecker"
})


// function Hello(context){
//     context.response.body="meowhecker"
// }
// app.use(Hello)

console.log('start at:http://127.0.0.1:8000')

await app.listen({ port: 8000 });

//commend
// deno run --allow-net oakServer.ts
```


## Args

Pass commend line parameters into the code


Example

```typescript
let port:number=parseInt(Deno.args[0])

```
```typescript
import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();


app.use((context)=>{
    context.response.body="meowhecker"
})
let port:number=parseInt(Deno.args[0])

console.log('start at:http://127.0.0.1:'+port)
await app.listen({ port: port });

//commend
// deno run --allow-net oakServer.ts 6669
```

![](https://i.imgur.com/BlTkaA2.png)


## HTTP request content 


### Get URL

```
pathname=${ctx.request.url.pathname}
```

### Get ALL search parameters 
```typescript
 searchParams=${ctx.request.url.searchParams}
```

### Get the specific search parameter 
```typescript
searchParams.get('name')=${ctx.request.url.searchParams.get('name')}
```

```typescript
import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use((ctx:any)=>{
    console.log('ctx=', ctx)
    console.log('ctx.request=', ctx.request)
    console.log('url=', ctx.request.url)
    ctx.response.body = `
      method=${ctx.request.method}
      url=${ctx.request.url.href}
      protocol=${ctx.request.url.protocol}
      hostname=${ctx.request.url.hostname}
      pathname=${ctx.request.url.pathname}
      hash=${ctx.request.url.hash}
      search=${ctx.request.url.search}
      searchParams=${ctx.request.url.searchParams}
      searchParams.get('name')=${ctx.request.url.searchParams.get('name')}
      headers=${JSON.stringify(Object.fromEntries(ctx.request.headers))}
    `;
})


console.log('start at:http://127.0.0.1:8000')

await app.listen({ port: 8000 });

```
![](https://i.imgur.com/uPt01mf.png)


### Get request URL / layout 

Get URL 

```typescript
 let pathname = context.request.url.pathname;
```

layout 

```typescript
function layout(body){
    return `
    <html>
    <title>Meow</title>
    <body>
    ${body}
    </body>
    </html>
    `
}


```




```typescript
import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();


function layout(body){
    return `
    <html>
    <title>Meow</title>
    <body>
    ${body}
    </body>
    </html>
    `
}


app.use((context:any)=>{
    let pathname = context.request.url.pathname;
    console.log(pathname)
    if(pathname.startsWith("/login")){
        context.response.body= layout('<h1>meow</h1>');
    }
    else{
        context.response.body= layout('<h1>fail</h1>');
    }
})



console.log('start at:http://127.0.0.1:8000')

await app.listen({ port: 8000 });

```


## Router (return JSON data to front end)


The `Router` class produces middleware which can be used with an `Application` to enable routing based on the pathname of the request.



**javascript object -> JSON Array** 
```typescript
context.response.body=Array.from(users.values()) //Convert it into the json form (array.form)
```


```typescript
import { Application, Router } from "https://deno.land/x/oak/mod.ts";
const port:number = 8005

const users = new Map<string,any>()
users.set("1",{
    id:"1",
    name:"meowhecker",
    password:"test123"
})
users.set("2",{
    id:"2",
    name:"meowmeow",
    password:"123"
})

const router = new Router

router.get("/", (context)=>{
    context.response.body="meow"
})
    .get("/users",(context)=>{
    context.response.body=Array.from(users.values()) //Convert it into the json form (array.form)
})
    .get("/users/:id", (context) => {
    if (users.has(context?.params?.id)) {
      context.response.body = users.get(context.params.id)
    }
  })

  const app = new Application();
  app.use(router.routes());
  app.use(router.allowedMethods());
  
  console.log('start at:http://127.0.0.1:'+port)
  await app.listen({port:port})
```







## Methods


### Context


- .send()
    - The function `send()` is designed to serve static content as part of a middleware function
 

Example

```typescript
import { Application } from "https://deno.land/x/oak/mod.ts";

const port:number = 8001

const app = new Application();


app.use(async(context,next)=>{

    try{
        await context.send({
            root: `${Deno.cwd()}/public`,
            index: "index.html"
        })
    }
    catch{
        await next()
    }
})


console.log('start at:http://127.0.0.1:'+port)
await app.listen({port:port})
```








### Request

- .url
	- An instance of [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) which is based on the full URL for the request. This is in place of having parts of the URL exposed on the rest of the request object.

```javascript
  console.log('url=', ctx.request.url)
```





### Response 
- .body
- .headers
- .status
- .type


 Redirect

```javascript
  ctx.response.redirect('https://tw.youtube.com')
```

# Application1(form)

## Declare and Import 

```typescript
import { Application, Router } from "https://deno.land/x/oak/mod.ts";
import * as view from "./View.ts"

const port:number = 8200

```

## User Data 

```typescript


//User data


interface userAssociatArray{
    id:any,
    name:string,
    password:string
}

const userAssociatArray =[
    {id:"1",name:"meowhecker",password:"test123"},
    {id:"2", name:"meowmeow", password:"123"}
]
```


## Router


```typescript


const router:any = new Router
router.get("/",listings)
       .get("/create",create)
       .get("/listing/:id",show)
       .post("/store",store)


```


## app
```typescript


const app = new Application();
app.use(router.routes());
app.use(router.allowedMethods());
      
```



Controller 

```typescript


//Controller Meow

    async function listings(ctx:any){
        ctx.response.body = await view.listings(userAssociatArray)
    }


    async function show(ctx:any){
        //fetch URL parameter 
            const URLid = ctx.params.id
            const singleUserData = userAssociatArray[URLid]
            if(!singleUserData){
                ctx.throw(404,"invalid ID")
            }else{
                ctx.response.body = await view.listingPage(singleUserData)
            }
    }

    async function create(ctx:any){
        ctx.response.body = await view.CreatePage()
    }

    async function store(ctx:any){

        // console.log(body)
        // console.log(body.value)
        // console.log(body.type)

        const body = ctx.request.body()
        const parse = await body.value

        
        const newUserObject:any={}

        for( const [key,value] of parse ) {
            newUserObject[key] = value
        }
        console.log("FormValue =",newUserObject)

        
        const id = userAssociatArray.push(newUserObject)
        newUserObject.create_at = new Date()   //create_at is a Database column
        newUserObject.id =id 
        ctx.response.redirect("/")
    }


```

```typescript
  console.log('start at:http://127.0.0.1:'+port)
  await app.listen({port:port})
```




> .push
Definition and Usage
The push() method adds new items to the end of an array.
The push() method changes the length of the array.
he push() method returns the new length.
 
    
    
    
## View 


```typescript
let layout = (title:string,content:any)=>{
    return ` <html>
    <head>
      <title>${title}</title>
      <style>
        body {
          padding: 80px;
          font: 16px Helvetica, Arial;
        }
    
        h1 {
          font-size: 2em;
        }
    
        h2 {
          font-size: 1.2em;
        }
    
        #posts {
          margin: 0;
          padding: 0;
        }
    
        #posts li {
          margin: 40px 0;
          padding: 0;
          padding-bottom: 20px;
          border-bottom: 1px solid #eee;
          list-style: none;
        }
    
        #posts li:last-child {
          border-bottom: none;
        }
    
        textarea {
          width: 500px;
          height: 300px;
        }
    
        input[type=text],
        textarea {
          border: 1px solid #eee;
          border-top-color: #ddd;
          border-left-color: #ddd;
          border-radius: 2px;
          padding: 15px;
          font-size: .8em;
        }
    
        input[type=text] {
          width: 500px;
        }
      </style>
    </head>
    <body>
      <section id="content">
        ${content}
      </section>
    </body>
    </html>`
}




function listings(userAssociatArray){

  let list:any = []


  //Using loop to fetch eache element in javascript object 
    for(let user of userAssociatArray){
      
        list.push(`
        <li>
          <h2>USER: ${user.name}</h2>
          <p><a href="/listing/${user.id}">User Information</a></p>
        </li>
        `)
    }



  //Embedding user information 
    const content =  
      `<h1>Posts</h1>
      <p>You have <strong>${userAssociatArray.length}</strong> posts!</p>
      <p><a href="/create">Create a Post</a></p>
      <ul id="posts">
        ${list.join('\n')}
      </ul>
      `
      return layout("post",content)

}

//Show single listing 

function listingPage(singleUserData){
  return layout("single listing",`
  <h1>User: ${singleUserData.name}</h1>
  <pre>Password: ${singleUserData.password}</pre>
  `)
}





//Create Page 

  function CreatePage(){
    return layout("New",`<h1>New Post</h1>
    <p>Create a new post.</p>
    <form action="/store" method="post">
      <p><input type="text" placeholder="name" name="name"></p>
      <p><input type="text" placeholder="password" name="password"></p>
      <!--<p><textarea placeholder="Contents" name="body"></textarea></p>-->
      <p><input type="submit" value="Create"></p>
    </form>`)
  }




export{layout, CreatePage, listings, listingPage}


```


>list.join()
  Definition and Usage
  The join() method returns an array as a string.
  The join() method does not change the original array.
  Any separator can be specified. The default is comma (,).

----


## Error solves


![](https://i.imgur.com/1riqB0I.png)

solve way 
```typescript
   const newUserObject:any={}
```

[Reference Document](https://stackoverflow.com/questions/12710905/how-do-i-dynamically-assign-properties-to-an-object-in-typescript)

## Result
![](https://i.imgur.com/JWNNmgj.png)

自己的網站自己打XD
![](https://i.imgur.com/Pw2E8wO.png)

## Defense (Stored-XSS) 
- .replace()
-  adding double quote 
(But too many ways could break it and execute js If I want )


# HTTP status 


1xx informational response

2xx success

3xx redirection

4xx client errors

5xx server errors


---


https://blog.csdn.net/xiaoanzi123/article/details/107028766