{
    "path": "/home/krm/dev/mimer-academia/server/web/Tutorial/show-information-from-a-database.sv.json",
    "s": "Ignor",
    "invert": true,
    "level": 1,
    "title": [
        "Visar en lista med data från en databas"
    ],
    "description": [
        [
            {
                "form": "important"
            },
            "author: krm\ncreated: 2022-05-05\nstatus: alpha\n"
        ]
    ],
    "statments": [],
    "comment": [],
    "cards": [
        {
            "level": 1,
            "title": [
                "# 👁️‍🗨️ Om detta avsnitt"
            ],
            "description": [
                "Visar en lista med information från databasen. Du behöver en databas med en tabel som kan ta emot data. Du måste också vara ansluten mot \ndatabasen. Titta också skärskilt igenom guiden om \"mustasch.js\" \neftersom vi kommer utfå från att du gjort något likande."
            ],
            "statments": [
                {
                    "description": [
                        "🦉 ",
                        [
                            {
                                "link": "./conect-to-a-databse.html"
                            },
                            "Ansluta till en databas"
                        ]
                    ]
                },
                {
                    "description": [
                        "🦉 ",
                        [
                            {
                                "link": "./create-a-table-in-a-database.sv.html"
                            },
                            "Skapa en tabell i en databas"
                        ]
                    ]
                },
                {
                    "description": [
                        "🦉 ",
                        [
                            {
                                "link": "./using-mustasch-for-pages.html"
                            },
                            "Använda \"mustasch.js\" för att få dynamisak sidor"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "title": [
                "❓ Vad är SQL?"
            ],
            "description": [
                "Språket som du använder för att ställa frågor till din databas. Titta i vårt dokument om du behöver repetera."
            ],
            "statments": [
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://docs.google.com/document/d/1TfDodKD673sy9sNbrUutvx5pcgI-LrQh8hjjAscrxeg/edit?usp=sharing"
                            },
                            "Om databaser"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 1,
            "title": [
                "Hämta en websida som kan innehålla vår lista"
            ],
            "description": [
                "Vi kompierar den ifrån en mall."
            ],
            "lang": "sh",
            "code": "cp ~/dev/mimer-template/File/web.html template/msg.html",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 2,
            "title": [
                "Skapa en method som svarar på ett anrop"
            ],
            "description": [
                "Vi vill ge iväg en html sida med information om vad som finns i databasen."
            ],
            "lang": "ts",
            "code": "app.get(\"/msg/\", async function (req: Request, res: Response) {",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 3,
            "title": [
                "Hämta data från databasen"
            ],
            "description": [
                "Du kan hämta data ifrån din tabell i databsen. ",
                [
                    {
                        "form": "important"
                    },
                    "await"
                ],
                " behövs eftersom du måste vänta på svaret."
            ],
            "lang": "js",
            "code": "let question = \"SELECT * FROM msg;\";\nconst result = await db.execute(question);",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 4,
            "title": [
                "Hämta infromationen från data vi fick"
            ],
            "description": [
                "Vi behöver ha informationen från objectet vi fick från databasen."
            ],
            "lang": "js",
            "code": "const msg_list = result.values().next().value;",
            "statments": [],
            "comment": [
                "Oklart varför vi måste göra ett så konstigt API anrop, men det fungerar. Testa gärna med ",
                [
                    {
                        "form": "strong"
                    },
                    "console.log"
                ],
                " för att se vad som händer."
            ]
        },
        {
            "level": 1,
            "index": 5,
            "title": [
                "Skapa ett object med data"
            ],
            "description": [
                "Lägg till informationen till ett object som repsenterar viktigt data."
            ],
            "lang": "json",
            "code": "const data = {\nmsgLista: msg_list\n};",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 6,
            "title": [
                "Läs in mallen vi ska använda"
            ],
            "description": [
                "Vi behöver ha mallen som text."
            ],
            "lang": "json",
            "code": "const template = await fs.readFile(\"template/msg.html\", \"utf-8\");",
            "statments": [],
            "comment": [
                "Detta kan du göra en gång i början av programmet istället."
            ]
        },
        {
            "level": 1,
            "index": 7,
            "title": [
                "Använd informationen"
            ],
            "description": [
                "Rendera texten med dataobjektet vi har gjort."
            ],
            "lang": "json",
            "code": "let text = Mustache.render(template, data);",
            "statments": [],
            "comment": [
                "Eftersom mallen ännu inte innehåller någon regel för att hantera datat som kommer in så kommer inget intressant att visas."
            ]
        },
        {
            "level": 1,
            "index": 8,
            "title": [
                "Skicka iväg data till användaren"
            ],
            "description": [
                "Vi avslutar nu vårt anrop genom att skicka resultat till klienten som efterfrågat det."
            ],
            "lang": "json",
            "code": "res.send(text);\n}",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 9,
            "title": [
                "Lägg till en html lista i mallen"
            ],
            "description": [
                "Vi behöver nu en lista i vår mall. Lägg till den kod i ",
                [
                    {
                        "form": "strong"
                    },
                    "msg.html"
                ],
                " för att få en lista."
            ],
            "lang": "html",
            "code": "<ul>\n// Code\n</ul>",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 10,
            "title": [
                "Fyll listan med data från mall"
            ],
            "description": [
                "Använd mallen för att få data. Läs på om hur ",
                [
                    {
                        "form": "important"
                    },
                    "Mustach"
                ],
                " mallar fungerar om du undrar om syntaxen."
            ],
            "lang": "html",
            "code": "{{#msgLista}}\n// Code\n{{/msgLista}}",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 11,
            "title": [
                "Skriv ut ett element"
            ],
            "description": [
                "I koden ovan lägger till kod som hanterar varje rad i listan."
            ],
            "lang": "html",
            "code": "<li> <span> {{date}} </span> - {{msg}} </li>",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 12,
            "title": [
                "✔️ Starta om servern och testa anropet"
            ],
            "description": [
                "Starta om server och gå in på sidan: ",
                [
                    {
                        "link": "http://localhost:3000"
                    },
                    "http://localhost:3000"
                ]
            ],
            "statments": [],
            "comment": []
        }
    ]
}