Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chaudinh/mo-cart
An E-commerce design convert from PSD to HTML and more.
https://github.com/chaudinh/mo-cart
bootstrap4 css expressjs git github-pages lowdb mvc nodejs nodejs-server psd-to-html pugjs shortid
Last synced: 12 days ago
JSON representation
An E-commerce design convert from PSD to HTML and more.
- Host: GitHub
- URL: https://github.com/chaudinh/mo-cart
- Owner: ChauDinh
- Created: 2019-02-07T08:00:49.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-28T10:11:50.000Z (over 5 years ago)
- Last Synced: 2024-10-18T01:47:02.038Z (about 1 month ago)
- Topics: bootstrap4, css, expressjs, git, github-pages, lowdb, mvc, nodejs, nodejs-server, psd-to-html, pugjs, shortid
- Language: HTML
- Size: 76.1 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NodeJS Web Server With ExpressJS - MO.Cart, an e-commerce site for shopping books
Converting a mock e-commerce PSD design into HTML, CSS.
### Structures, Planning
* Use a mock E-commerce Photoshop design
* Use Bootstrap to make the responsive of the site
* Use Bootstrap Carousel
* Use NodeJS for the server
### Static Web Server & Dynamic Web Server
#### Static web server
* Easy to build
* Cheap to host (HTML, CSS)
* Fixed content
#### Dynamic web server
* Little hard to build
* Costly than static server host
* Easily edit content by their own
#### Frameworks for dynamic web server
* PHP: Laravel, Symfony, CakePHP, etc.
* Java: Spring, Play Framework, etc.
* Python: Django, Flask, etc.
* Ruby: Rails
* JavaScript: ExpressJS, SailsJS, MeteorJS, KoaJS, etc.
### Single Page Application (SPA) and Multipages Application
#### Single Page Application
* Content rendered in the front-end
* No page reloading
* Interact with data via some JSON API
#### Multipages Application
* Receive a request from client and response a HTML
* Use page reloading
### Creating form to search data
* Use form action
* Use GET method
Create a search form (pug)
```pug
form(action="/users/search", method="GET")
input(type="text", name="q")
button Search
```
Then add logic for searching the typed text
```js
app.get("/users/search", (req, res) => {
let q = req.query.q;
let matchedUsers = users.filter(user => {
return user.name.toLowerCase().indexOf(q.toLowerCase()) !== -1;
})
res.render('users/index', {
users: matchedUsers
})
});
```
### Creating form to add data
* Use form action
* Use POST method
* Use req.body
Create a form
```pug
form(action="/users/create", method="POST")
label Name
input(type="text", name="name")
button Create
```
Then use body-parser middleware to retreive POST query parameters
##### Installation
```
npm install body-parser --save
```
##### Write middleware
```js
const bodyParser = require("body-parser");
...
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
...
app.post("/users/create", (req, res) => {
users.push(req.body);
res.redirect("/users");
});
```
### Use lowdb to store data
##### Installation
```
npm install lowdb --save
```
##### Set defaults
```js
const low = require("lowdb");
const FileSync = require("lowdb/adapters/FileSync");
const adapter = new FileSync("db.json");
const db = low(adapter);
db.defaults({ users: [], products: [] }).wriet();
```
##### Add to database
```js
...
app.post("users/create", (req, res) => {
db.get("users").push(req.body).write();
res.redirect("/users");
});
```
##### Search database
```js
app.get("users/search", (req, res) => {
let q = req.query.q;
let users = db.get("users").value();
let matchedUsers = users.filter(user => {
return user.name.toLowerCase().indexOf(q.toLowerCase()) !== -1;
});
res.render('users/index', {
users: matchedUsers
});
});
```