-
5. ViewsCRUD/Node Express MongoDB 2022. 7. 29. 00:18
https://www.youtube.com/watch?v=W1Kttu53qTg I learned everything from this tutorial and I don't need to mean to get money to write the blog. It's everything for myself studying and to remain that. Ejs = embedded javascript temlating
Make index.ejs file
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CRUD Application</title> </head> <body> <!--Header--> <header id="header"> <nav> <div class="container"> <div class="text-center"> <a href="/" class="nav-brand text-dark">User Management System</a> </div> </div> </nav> </header> <!--/Header-->> </body> </html>Inside the server.js
app.get("/", (req, res) => { res.render() // allows to render HTML file });We will separate the file into Header and Footer.
include/_header.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CRUD Application</title> </head> <body> <!--Header--> <header id="header"> <nav> <div class="container"> <div class="text-center"> <a href="/" class="nav-brand text-dark">User Management System</a> </div> </div> </nav> </header> <!--/Header-->include/_footer.ejs
</body> </html>include/index.ejs
<!--include header--> <%-include('include/_header')%> <!--/include header--> <!--include footer--> <%-include('include/_footer')%> <!--/include footer-->Then make an index.html file to see the change directly. (use live server)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CRUD Application</title> </head> <body> <!--Header--> <header id="header"> <nav> <div class="container"> <div class="text-center"> <a href="/" class="nav-brand text-dark">User Management System</a> </div> </div> </nav> </header> <!--/Header--> </body> </html>'CRUD > Node Express MongoDB' 카테고리의 다른 글
7. Styling HTML (0) 2022.07.29 6. Main section (0) 2022.07.29 4. Modules (0) 2022.07.28 3. HTTP Server (0) 2022.07.28 2. Project Structure (0) 2022.07.28