diff --git a/examples/simple-ejs-app/README.md b/examples/simple-ejs-app/README.md new file mode 100644 index 00000000..dead1a1c --- /dev/null +++ b/examples/simple-ejs-app/README.md @@ -0,0 +1,33 @@ +# Simple EJS App + +This is a simple app which has home, login, profile and logout routes. + +![](app-screenshot.PNG) + +The backend is in nodejs and expressjs. + +The frontend is in ejs template engine. + +This project is scaffolding project which can be used as a template. + +> :warning: The Login details are not saving anywhere. + +# App setup + +- Install nodejs and npm in your machine if not installed. +- Install dependencies `npm install` +- Run the application `npm run start` + +Check the application at `localhost:3000` on browser. + +## About me + +I am Shubham Chadokar and you can check my work [@schadokar](https://schadokar.dev). + +[GitHub Readme](https://github.com/schadokar) + +--- + +Photo by J Lee on Unsplash + +--- diff --git a/examples/simple-ejs-app/app-screenshot.PNG b/examples/simple-ejs-app/app-screenshot.PNG new file mode 100644 index 00000000..d3565a58 Binary files /dev/null and b/examples/simple-ejs-app/app-screenshot.PNG differ diff --git a/examples/simple-ejs-app/app.js b/examples/simple-ejs-app/app.js new file mode 100644 index 00000000..590fd0ad --- /dev/null +++ b/examples/simple-ejs-app/app.js @@ -0,0 +1,29 @@ +const express = require("express"); +const bodyParser = require("body-parser"); +const cors = require("cors"); +const appRoutes = require("./router/app-routes"); +// create an app instance +const app = express(); +// Express body parser +app.use(cors()); +app.use(bodyParser.json()); +app.use( + bodyParser.urlencoded({ + limit: "50mb", + extended: false, + parameterLimit: 50000, + }) +); + +// set ejs as view-engine +app.set("view engine", "ejs"); + +// setup public folder +app.use(express.static("./public")); + +// app routes +app.use("/", appRoutes); + +app.listen(3000, () => { + console.log("app is listening to port 3000"); +}); diff --git a/examples/simple-ejs-app/package.json b/examples/simple-ejs-app/package.json new file mode 100644 index 00000000..cb9a79d0 --- /dev/null +++ b/examples/simple-ejs-app/package.json @@ -0,0 +1,19 @@ +{ + "name": "simple-ejs-app", + "version": "1.0.0", + "description": "", + "main": "app.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "node app.js" + }, + "keywords": [], + "author": "Shubham Chadokar", + "license": "ISC", + "dependencies": { + "body-parser": "^1.19.0", + "cors": "^2.8.5", + "ejs": "^3.1.5", + "express": "^4.17.1" + } +} diff --git a/examples/simple-ejs-app/public/app.css b/examples/simple-ejs-app/public/app.css new file mode 100644 index 00000000..39ec0be0 --- /dev/null +++ b/examples/simple-ejs-app/public/app.css @@ -0,0 +1,49 @@ +body { + margin-top: 50px; + margin-bottom: 50px; +} + +form { + margin-left: 25%; +} + +.ghost-input { + display: block; + font-weight: 300; + width: 50%; + font-size: 25px; + border: 0px; + outline: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + color: #4b545f; + background: #fff; + font-family: Open Sans, Verdana; + padding: 15px 15px; + margin: 30px 0px; + -webkit-transition: all 0.1s ease-in-out; + -moz-transition: all 0.1s ease-in-out; + -ms-transition: all 0.1s ease-in-out; + -o-transition: all 0.1s ease-in-out; + transition: all 0.1s ease-in-out; +} +.ghost-input:focus { + border-bottom: 1px solid #ddd; +} +header { + text-align: center; +} + +main { + margin-top: 10px; + text-align: center; +} + +.app-footer { + font-size: medium; + height: 50px; + bottom: 0; + text-align: center; + padding-top: 20px; +} diff --git a/examples/simple-ejs-app/public/twitter.svg b/examples/simple-ejs-app/public/twitter.svg new file mode 100644 index 00000000..1303a71a --- /dev/null +++ b/examples/simple-ejs-app/public/twitter.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/simple-ejs-app/public/wallpaper.jpg b/examples/simple-ejs-app/public/wallpaper.jpg new file mode 100644 index 00000000..92f325dd Binary files /dev/null and b/examples/simple-ejs-app/public/wallpaper.jpg differ diff --git a/examples/simple-ejs-app/router/app-routes.js b/examples/simple-ejs-app/router/app-routes.js new file mode 100644 index 00000000..06ef40b6 --- /dev/null +++ b/examples/simple-ejs-app/router/app-routes.js @@ -0,0 +1,23 @@ +const router = require("express").Router(); + +router.get("/", (req, res) => { + res.render("home"); +}); + +router.get("/login", (req, res) => { + res.render("login"); +}); + +router.post("/profile", (req, res) => { + res.redirect(`/profile?username=${req.body.username}`); +}); + +router.get("/profile", (req, res) => { + res.render("profile", { username: req.query.username }); +}); + +router.get("/logout", (req, res) => { + res.redirect("/"); +}); + +module.exports = router; diff --git a/examples/simple-ejs-app/views/home.ejs b/examples/simple-ejs-app/views/home.ejs new file mode 100644 index 00000000..07ef9c01 --- /dev/null +++ b/examples/simple-ejs-app/views/home.ejs @@ -0,0 +1,28 @@ +<%- include('./partials/head')-%> + + + <%- include('./partials/header')-%> +
+

नमस्ते (Namaste)

+
+ +
+ simple image +
+

Truth can only be found in one place: the code.

+ +
+
+ <%- include('./partials/footer')-%> + diff --git a/examples/simple-ejs-app/views/login.ejs b/examples/simple-ejs-app/views/login.ejs new file mode 100644 index 00000000..ea6cbcc2 --- /dev/null +++ b/examples/simple-ejs-app/views/login.ejs @@ -0,0 +1,39 @@ +<%- include('./partials/head')-%> + + + <%- include('./partials/header')-%> + +
+
+ +
+
+ +
+
+ +
+ +
+ + <%- include('./partials/footer')-%> + diff --git a/examples/simple-ejs-app/views/partials/footer.ejs b/examples/simple-ejs-app/views/partials/footer.ejs new file mode 100644 index 00000000..c36a42cf --- /dev/null +++ b/examples/simple-ejs-app/views/partials/footer.ejs @@ -0,0 +1,10 @@ + + + diff --git a/examples/simple-ejs-app/views/partials/head.ejs b/examples/simple-ejs-app/views/partials/head.ejs new file mode 100644 index 00000000..9a2fecc8 --- /dev/null +++ b/examples/simple-ejs-app/views/partials/head.ejs @@ -0,0 +1,19 @@ + + + + + + Simple ejs app + + + + + diff --git a/examples/simple-ejs-app/views/partials/header.ejs b/examples/simple-ejs-app/views/partials/header.ejs new file mode 100644 index 00000000..b632d623 --- /dev/null +++ b/examples/simple-ejs-app/views/partials/header.ejs @@ -0,0 +1,10 @@ + +
+

Simple EJS App

+ +
diff --git a/examples/simple-ejs-app/views/profile.ejs b/examples/simple-ejs-app/views/profile.ejs new file mode 100644 index 00000000..10ed9752 --- /dev/null +++ b/examples/simple-ejs-app/views/profile.ejs @@ -0,0 +1,28 @@ +<%- include('./partials/head')-%> + + + <%- include('./partials/header')-%> + +
+

नमस्ते (Namaste) <%= username %>

+
+
+ simple image +
+

Truth can only be found in one place: the code.

+ +
+
+ <%- include('./partials/footer')-%> +